☺️

CSS FlexBox 簡単まとめ

に公開
2022/06/25
CSS
tech

Flexible Box Module （FlexBox）はCSS3から導入されたレイアウトモジュールは便利で、よく使いますが、今一覚えられないので簡単のまとめを書いていきます。。

この記事はFlexBoxについてある程度ご存知している方、使っているけど今一の方におすすめです。
FlexBoxが通用する条件：
  1. 親要素(コンテナー)と子要素（アイテム）が存在する。
  2. 親要素(コンテナー)に display:flex が描かれている。
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

コンテナーとアイテムが使えるプロパティは以下通りです。
1.コンテナー

プロパティ 説明 値 説明
flex-direction アイテムの並び順を指定 row 水平方向に左から右へ
row-reverse 水平方向に右から左へ
column 垂直方向に上から下へ
colmn-reverse 垂直方向に下から上へ
flex-wrap アイテムの折り返しを指定する nowrap アイテムを折り返さず一列に
wrap 複数行のアイテムを上から下へ
wrap-reverse 複数行のアイテムを下から上へ
flex-flow アイテムの並び順と折り返しを一括で指定する flex-flow: [flex-direction] [flex-wrap]
justify-content アイテムの水平方向の位置を指定する flex-start 左揃え
flex-end 右揃え
center 中央揃え
space-between 両端の余白を空けず、要素は均等に間隔を空け
space-around 両端も要素も含めて、均等な間隔を空け
space-evenly 両端は同じ大きさの間隔を、要素は均等な間隔を空け
align-items アイテムの垂直方向の位置を指定する stretch 上下の余白を埋めるように
flex-start 上揃え
flex-end 下揃え
center 中央揃え
baseline ベースラインに合わせ
align-content アイテムの行の垂直方向の位置を指定する（アイテムが複数行がある場合） stretch 上下の余白を埋めるように
flex-start 上揃え
flex-end 下揃え
center 中央揃え
space-between 最上行と最下行の余白を空けず、行は均等に間隔を空け
space-around 位置関係なく行は均等に間隔を空け

2.アイテム

プロパティ 説明 値 説明・備考
order アイテムの並び順を指定 number, グローバル値 default が ０,マイナス数字可能
flex-grow アイテムの伸び率を指定 number, グローバル値 default が ０、マイナス数字不可
flex-shrink アイテムの縮み率を指定 number, グローバル値 default が ０
flex-basis アイテムのベースの幅を指定 number + 単位, グローバル値, 固有のサイズ default が auto
flex アイテムの伸び率、縮み率、ベースの幅を一括指定 flex:[flex-grow ] [flex-shrink] [flex-basis]
align-self アイテムの垂直方向の位置を指定 auto 親要素のalign-itemsの値を使用
flex-start 上揃え
flex-end 下揃え
center 中央揃え
baseline ベースラインに合わせて
stretch 上下の余白を埋めるように

以上のプロパティを組み合わせて利用すると、レスポンシブデザインでも楽になります。

Discussion