Blog スタッフブログ

フレックスボックスとは、上記の画像のように複数のコンテンツを横並びにするレイアウトのことを指します。

この手法を取り入れるとPCとスマホで同じコードを使いまわしやすくレスポンシブデザインに対応できるため、コーポレートサイトを中心にWEBデザインで幅広く使われています。

こうしたレイアウトはCSSプロパティのdisplay:flexで実現できます。

display:flexを親要素に指定すると、その中にある子要素をすべて横並びにすることができます。

子要素のコンテンツが同じ高さであれば、これだけで綺麗に横方向に並びます。

とはいえ、実際のWEB制作では子要素ごとのコンテンツの高さがちがうこともしばしばあります。

こういった場合に並び順を整える際、有用なのがalign-itemsというcssプロパティです。

上記画像では画像が入った要素の親要素にdisplay:flexが適用されていて、

左側のブロックだけ画像が2枚入っているためその分だけコンテンツの高さが上がっています。

こういった場合、display:flexを指定してある親要素にalign-items:centerと設定することで横方向中央に要素を並べることができます。

・display:flexの強み

横並び表示のレイアウトはスマホ画面だと窮屈になってしまいがちですが、

そういった場合は以下のようにスマホ画面の時のみdisplay:flexを削除する、といった処理を行うことで見やすいデザインになります。

・応用

display:flexの子要素にはorderというプロパティを設定することができます。

これは子要素同士のdisplay:flex内での表示位置を変更できるものであり、

例えばコード上で1番目に表示されている要素に対してorder:2と設定すると、

display:flexが機能している間この要素はflex内の2番目の要素として配置されます。

例として、「PC表示の時のみdisplay:flexを適用する」という処理が行われている以下の並びでは画像側の子要素にorder:2を設定することで本来テキスト側の子要素より後に記述されているにもかかわらず、先に表示されるようになります。

こういった処理は、横並び時と縦並び時でコンテンツの並び順を変更したいときに有用です。