【CSS】「Flexbox」について

Flexboxとは？

複雑化したWebアプリのレイアウトを組みやすくすることを目的としてCSS3から導入されました。

Flexboxの構成要素

Flexboxコンテナ

CSSにて、「display:flex」と指定します。

Flexboxアイテム

Flexboxコンテナの子要素です。コンテナの子要素に入れたタグは自動でFlexboxアイテムに変換されるので明示的に属性を指定する必要はありません。

「Flexboxコンテナ」で指定できるプロパティ

flex-direction

子要素の配置方向を指定できます。

row

子要素を左から右に配置する。

column

子要素を縦に配置する。

row-reverse

子要素を右から左に配置する。

column-reverse

子要素を下から上に配置する。

flex-wrap

子要素がはみ出てる部分をどうするか指定します。

nowarap

折り返しなしで、単一行にする。

wrap

折り返しありの複数行にする。

warp-reverse

折り返しが逆になります。

flex-flow

「flex-direction」と「flex-wrap」をまとめて設定することが可能です。

justify-content

子要素が最大サイズに達していない時、どちらにそろえるか指定できます。

flex-start

横配置なら「左揃え」、縦配置なら「上揃え」にします。

flex-end

横配置なら「右揃え」、縦配置なら「下揃え」にします。

center

「中央揃え」にします。

space-between

均等に間隔をあけます。

space-around

左右も含めて均等に間隔をあけます。

align-items

stretch

Flexアイテムに高さが設定されている場合は、高さ上限まで広げます。

されていない場合、Flexアイテムの一番高さが高い物に合わせます。

flex-start

横配置であれば、「上揃え」、縦配置であれば「左揃え」になります。

flex-end

横配置であれば、「下揃え」、縦配置であれば「右揃え」になります。

center

「中央揃え」にします。

baseline

Flexアイテムのベースラインをそろえます。