Flexboxで横並びレイアウトをマスターしよう

Flexbox CSS3

※すきまのスキマはアフィリエイト広告を利用しています

レイアウトの仕方は色々覚えていた方が作業がはかどる!というわけで以前の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-start

flex-end

右揃え flex-end

center

中央揃え center

space-between

両端の余白なしで均等に配置 space-between

space-around

均等に配置 space-around

たて方向の配置(align-items)

親要素(Flexコンテナ)へalign-itemsを指定することで、たて方向の配置をコントロールできます。

stretch

一番高い要素に合わせる stretch

flex-start

上揃え flex-start

flex-end

下揃え flex-end

center

中央揃え center

複数行のたて方向の配置(align-content)

親要素(Flexコンテナ)へalign-contentを指定することで、複数行の場合のたて方向の配置をコントロールできます。

stretch複数行

一番高い要素に合わせる stretch

flex-start複数行

上揃え flex-start

flex-end複数行

下揃え flex-end

center複数行

中央揃え center

space-between複数行

両端の余白なしで均等に配置 space-between

space-around複数行

均等に配置 space-around

並び順(flex-direction)

親要素(Flexコンテナ)へflex-directionを指定することで、並びの方向をコントロールできます。

row

左から並ばせる row

row-reverse

右から並ばせる row-reverse

column

上から並ばせる column

column-reverse

下から並ばせる column-reverse

折り返しの指定(flex-wrap)

親要素(Flexコンテナ)へflex-wrapを指定することで、折り返しを指定できます。(折り返しの指定なしだと子要素が全て真横に並ぶ

row

折り返さない nowrap

wrap

左から順に折り返し wrap

wrap-reverse

右から順に折り返し wrap-reverse

自由な並び順(order)

子要素(Flexアイテム)へorder: 数値を指定することで、子要素の並び順をカスタムできます。

要素の幅を指定(flex-basis)

子要素(Flexアイテム)へflex-basis: 数値を指定することで、子要素の幅を指定できます。

指定する数値はpxなどの単位がつくものに限ります。

幅の割合を広げる(flex-grow)

子要素(Flexアイテム)へflex-grow: 数値を指定することで、子要素の幅の割合を広げるカスタムができます。

数値が大きいほど幅の割合も大きくなります。

幅の割合を縮める(flex-shrink)

子要素(Flexアイテム)へflex-shrink: 数値を指定することで、子要素の幅の割合を縮めるカスタムができます。

flex-growとは逆に数値が大きいほど幅の割合は小さくなります。