flexbox(フレックスボックス)のプロパティ

2020年2月3日2022年6月4日

display・・・「display: flex;」を親に設定して子要素の並び方を決定します。
※インラインブロックにしたい場合はflexではなくinline-flexを指定します。
flex-direction　・・・子要素が並んでいく方向を決定します。（rowは右に向かって、columnは下に向かって並んで行きます。row-reverseやcolumn-reverseもあります。rowが初期値。）
flex-wrap　・・・子要素が折り返すかどうかを決定します。(wrapで折り返す、nowrapで折り返さない(初期値))
justify-content　・・・flex-directionで決定した方向軸に子要素がどのように並ぶかを決定します。(flex-startで開始方向に詰めて並ぶ、flex-endで終了方向に詰めて並ぶ、centerで中央に並ぶ、space-betweenで要素間の余白を均等に空けて並ぶ、space-aroundは子要素の左右の余白を均等に空けて並ぶ)
align-items　・・・flex-directionで決定した方向軸に対して垂直な方向への各要素の配置を決定します。
align-content　・・・複数行のフレックスコンテナの行が垂直な方向へどのように並ぶかを決定します。

align-self　・・・align-itemsを個別のフレックスアイテムに対して指定します。
flex-basis　・・・フレックスアイテムの本来の大きさを決定します
flex-grow　・・・フレックスコンテナにポジティブマージンが発生した時にアイテムがそのマージンを自身の大きさとしてどれくらいとりこんで大きくなるかを決定します。
flex-shrink　・・・フレックスコンテナにネガティブマージンが発生した時にアイテムがそのマージンを自身の大きさとしてどれくらいとりこんで小さくなるかを決定します。
order　・・・他のフレックスアイテムとの並び順の順番を決定します。