レイアウトの仕方は色々覚えていた方が作業がはかどる!というわけで以前のCSSグリッドレイアウトに続き、今回はFlexboxについて。
CSSグリッドレイアウトについてはこちらから
Flexboxとは
FlexboxとはFlexible Box Layout Moduleの略称で、柔軟性のあるレイアウトができるCSSです。
使用する場面にもよりますが、今までfloatなどで横並びにしていたレイアウトもこのFlexboxでより組みやすく編集もしやすくなった気がします。
Flexboxの使い方
早速実践してみましょう。
See the Pen Flexbox1 by sukimadou (@sukimadou) on CodePen.
divで囲んだ要素を5つ用意しました。
色や余白を調整してあるだけなので、まだ縦並びの状態です。
ここで親要素にdisplay:flexを指定してみましょう。
See the Pen Flexbox2 by sukimadou (@sukimadou) on CodePen.
なんとこれだけで、横並びに。
高さも文字数に合わせられていますね。
(上記のプレビューで画面幅が狭くて文字まで縦並びの状態しか見れない!という方はプレビュー下で倍率を変えてみてください)
親要素へdisplay:flexを指定することで、Flexboxにしますよという指示になります。
あとは見え方や並び方をお好みに指定していけばOKです。
レイアウト方法
横方向の配置(justify-content)
親要素(Flexコンテナ)へjustify-contentを指定することで、横方向の配置をコントロールできます。
左揃え flex-start
右揃え flex-end
中央揃え center
両端の余白なしで均等に配置 space-between
均等に配置 space-around
たて方向の配置(align-items)
親要素(Flexコンテナ)へalign-itemsを指定することで、たて方向の配置をコントロールできます。
一番高い要素に合わせる stretch
上揃え flex-start
下揃え flex-end
中央揃え center
複数行のたて方向の配置(align-content)
親要素(Flexコンテナ)へalign-contentを指定することで、複数行の場合のたて方向の配置をコントロールできます。
一番高い要素に合わせる stretch
上揃え flex-start
下揃え flex-end
中央揃え center
両端の余白なしで均等に配置 space-between
均等に配置 space-around
並び順(flex-direction)
親要素(Flexコンテナ)へflex-directionを指定することで、並びの方向をコントロールできます。
左から並ばせる row
右から並ばせる row-reverse
上から並ばせる column
下から並ばせる column-reverse
折り返しの指定(flex-wrap)
親要素(Flexコンテナ)へflex-wrapを指定することで、折り返しを指定できます。(折り返しの指定なしだと子要素が全て真横に並ぶ)
折り返さない nowrap
左から順に折り返し wrap
右から順に折り返し wrap-reverse
自由な並び順(order)
子要素(Flexアイテム)へorder: 数値を指定することで、子要素の並び順をカスタムできます。
要素の幅を指定(flex-basis)
子要素(Flexアイテム)へflex-basis: 数値を指定することで、子要素の幅を指定できます。
指定する数値はpxなどの単位がつくものに限ります。
幅の割合を広げる(flex-grow)
子要素(Flexアイテム)へflex-grow: 数値を指定することで、子要素の幅の割合を広げるカスタムができます。
数値が大きいほど幅の割合も大きくなります。
幅の割合を縮める(flex-shrink)
子要素(Flexアイテム)へflex-shrink: 数値を指定することで、子要素の幅の割合を縮めるカスタムができます。
flex-growとは逆に数値が大きいほど幅の割合は小さくなります。