こんにちは、エソラボの大西です。

今回は、以前のブログにも記述させていただいた、flexboxの現場での使い方をご紹介します

この記事では

• どんなデザインの時にflexboxを使用するのか
• 現場で超使うflexboxの使用例

を書いておりますので、これからflexboxを使用してコーディングをされるという方や、WEBデザインを勉強されている方はぜひ参考にしてみてください。

どんなデザインの時にflexboxを使用するのか

そもそもflexboxをどのタイミングで使用するのか？
ズバリ、要素を横並べにしたい時に使用します。

floatなどで横並びにするように他のサイトでは書いてあったよ、なんて方もいらっしゃるかと思いますが、floatは一切使用しなくても問題ございません。

現場で超使うflexboxの使用例

こんなデザインのサイトはよく見かけませんでしょうか？

最近は、このように横並べにするデザインが多く見受けられます。

今回はこちらの画像を題材にして、flexboxの解説をしていきます。

HTMLの構造

flexboxをCSSで挿入する前に、まずはHTMLを作らなければCSSを適用することができませんね。

ですので、こう言った構造のHTMLをまずは作成します。

See the Pen
flexbox Html by akiraman786 (@akiraman786)
on CodePen.

ポイントとしては、

• containerクラスで囲むこと
• containerクラスの中に、横並べにしたい要素を入れること（今回であれば、画像と文字群を横並べにしたいため、[container__img]と[container__txt]で囲んでいる）

ところとなります。

そもそもflexboxとは親要素に指定をすることで子要素を横並べにするというCSSプロパティです。
ですので横並べにしたいものを只中に入れているだけのシンプルな構造となっています。

CSSの適用

あとは、横並べにするだけであれば、親要素であるcontainerクラスに対してflexboxを指定するだけです。

See the Pen
flexboxCss by akiraman786 (@akiraman786)
on CodePen.

どうですか？めちゃくちゃ簡単じゃないですか？

ただ、画像のような見た目ではないため少しCSSで装飾をしていきたいと思います。
そこまで難しい見た目ではないので説明は省略しますが、わからないところなどがもしございましたらお問い合わせフォームよりご質問ください。

See the Pen
flexboxComplete by akiraman786 (@akiraman786)
on CodePen.

まとめ

今回はflexboxの実戦の説明をさせていただきましたがいかがだったでしょうか？
今回のようなケースは本当によく使用するので是非トライしてみてくださいね。

また、株式会社Esolabではflexboxのコーディングを含めたWEBのデザイン・制作をしております。
大阪でホームページ制作などを検討されている方は是非一度ご相談ください。