要素の表示を制御
| プロパティ | 値 | 備考 |
|---|---|---|
| display | inline block inline-block list-item table flex none | インラインボックスとして表示 ブロックレベルボックスとして表示 インラインボックスとして配置されるが、幅や高さの指定が可能 リスト項目として表示 テーブルとして表示 フレキシブルボックスコンテナとして表示 表示しない |
displayプロパティは、各要素の表示形式を指定します。ここに挙げたもの以外にもたくさんありますが、よく使われるのはこれくらいです。
まず、flexboxでレイアウトをする場合、レイアウトを適用したい要素の親要素に対して、displayプロパティの値をflexに指定しておきます。
各項目の配置方向を指定する
| プロパティ | 値 | 備考 |
|---|---|---|
| flex-direction | row row-reverse column column-reverse | 左から右へ（→） 右から左へ（←） 上から下へ（↓） 下から上へ（↑） |
主軸方向の整列を指定する
| プロパティ | 値 | 備考 |
|---|---|---|
| justify-content | flex-start flex-end center space-around space-between | 主軸の開始位置に寄せる 主軸の終了位置に寄せる 中央に揃える 余白を均等にする 間隔を均等にする |
See the Pen
2-13_3 by Koji Seto (@yseseto)
on CodePen.
交差軸方向の整列を指定する
| プロパティ | 値 | 備考 |
|---|---|---|
| align-items | stretch flex-start flex-end center baseline | 大きいものに揃える 交差軸の開始位置に揃える 交差軸の終了位置に揃える 中央に揃える ベースラインに揃える |
See the Pen
2-13_4 by Koji Seto (@yseseto)
on CodePen.
各項目の折り返しを指定する
| プロパティ | 値 | 備考 |
|---|---|---|
| flex-wrap | nowrap wrap wrap-reverse | 折り返さない 主軸の開始位置から始め、折り返す 主軸の終了位置から始め、折り返す |
See the Pen
2-13_5 by Koji Seto (@yseseto)
on CodePen.
項目全体の配置を指定する
| プロパティ | 値 | 備考 |
|---|---|---|
| align-content | stretch flex-start flex-end center space-around space-between | 引き伸ばして表示 主軸の開始位置に寄せる 主軸の終了位置に寄せる 中央に揃える 余白を均等にする 間隔を均等にする |
See the Pen
2-13_6 by Koji Seto (@yseseto)
on CodePen.
項目の表示順を指定
| プロパティ | 値 | 備考 |
|---|---|---|
| order | [値] 1 | 値が小さいほど前に表示される（デフォルト0） |