☺️
CSS FlexBox 簡単まとめ
Flexible Box Module （FlexBox）はCSS3から導入されたレイアウトモジュールは便利で、よく使いますが、今一覚えられないので簡単のまとめを書いていきます。。
この記事はFlexBoxについてある程度ご存知している方、使っているけど今一の方におすすめです。
FlexBoxが通用する条件：
- 親要素(コンテナー)と子要素（アイテム）が存在する。
- 親要素(コンテナー)に 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