Flexboxで使うプロパティをまとめてみた

SHARE

display: flex;と一緒によく使いそうなcssのプロパティをまとめてみました。

flex-direction

フレックスコンテナー内での主軸方向を設定します。

フレックスアイテムを通常の左から右とは逆方向や縦方向に配置することができます。

rowフレックスコンテナの主軸方向は左から右
row-reverseフレックスコンテナの主軸方向は右から左
columnフレックスコンテナの主軸方向は上から下
column-reverseフレックスコンテナの主軸方向は下から上

justify-content

フレックスアイテムの主軸方向の揃え位置を指定します。

flex-start左揃え
flex-end右揃え
center中央揃え
space-betweenアイテムの間に均等にスペース
space-aroundアイテムの両端に均等にスペース

flex-wrap

フレックスアイテムの折り返しを指定します。

nowrap折り返さない
wrap折り返す
wrap-reverse逆方向に折り返す

align-items

フレックスアイテムの縦方向の揃え位置を指定します。

normal初期値
stretch自動調整
center中央に配置
flex-start上揃え
flex-end下揃え

前の記事

AtomのRemote FTPで接続できないときの対応方法

次の記事

【箱根駅伝】青学原監督と神林選手のエピソードにちょっと違和感