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アイテムのベースラインをそろえます。
この記事へのコメントはありません。