要素の横並びはFlexboxで決まりです。
親要素(flexコンテナ)のCSS
親要素をコンテナに指定
親要素をブロック要素にする場合
css
.parent{
display:flex;
}
親要素をインライン要素にする場合
css
.parent{
display:inline-flex;
}
子要素の並びの方向の指定(flex-directionプロパティ)
| 値 | 意味 |
|---|---|
| row | 左から右(初期値) |
| row-reverse | 右から左 |
| column | 上から下 |
| column-reverse | 下から上 |
折り返し時のルール(flex-wrapプロパティ)
| 値 | 意味 |
|---|---|
| nowrap | 折り返さない(初期値) ※収まりきらない場合、子要素が縮む |
| wrap | 折り返す(下に) |
| wrap-reverse | 折り返す(上に) |
折り返し時のルールと子要素の向きをまとめて指定(flex-flowプロパティ)]
css
.parent {
display: flex;
flex-flow: row wrap;
}
揃え
初期値が、伸びる設定になっているので注意が必要です。
水平方向の揃え(justify-contentプロパティ)
| 値 | 意味 |
|---|---|
| flex-start | 子要素をスタート揃え(初期値) |
| flex-end | 子要素をエンド揃え |
| center | 子要素を中央揃え |
| space-between | 最初と最後の子要素を左右の端に配置し、残りの要素は均等に配置 |
| space-around | 両端にも間隔が発生 両端の間隔は他の半分 |
※スタート揃えは、flex-directionがrowの場合「左」、row-reverseの場合「右」、columnの場合「上」、column-reverseの場合「下」に揃えます。エンド揃えはその逆です。
※space-xxxは、最終行の子要素が他の行より少ない時でも均等に配置されてしまう罠があります。
垂直方向の揃え(align-contentプロパティ)
| 値 | 意味 |
|---|---|
| stretch | 親要素の高さに合わせて広げて配置(初期値) |
| flex-start | 子要素をスタート揃え |
| flex-end | 子要素をエンド揃え |
| center | 子要素を中央揃え |
| space-between | 最初と最後の子要素を上下の端に配置し、残りの要素は均等に配置 |
| space-around | 両端にも間隔が発生 両端の間隔は他の半分 |
行、列の中での揃え(align-itemsプロパティ)
子要素の高さが異なる場合のルールを決めます。
| 値 | 意味 |
|---|---|
| stretch | 親要素の高さか、一番大きい子要素の高さに合わせて広げて配置(初期値) |
| flex-start | スタート揃え |
| flex-end | エンド揃え |
| center | 中央揃え |
| baseline | ベースライン揃え |
上下左右中央揃え
Flexboxを使うと、簡単に実現できます。
css
.parent{
display: flex;
align-items:center;
justify-content: center;
}
子要素(flexアイテム)のCSS
順序の指定(orderプロパティ)
数値のみ指定可能で、初期値は0です。(マイナス値も有効)
子要素の伸びる比率(flex-growプロパティ)
親要素に余ったスペースがあった場合、指定のある子要素が他の子要素に対してどれくらい伸びるかを指定します。
数値のみ指定可能で初期値は0です。(マイナス値は無効)
子要素の縮む比率(flex-shrinkプロパティ)
親要素に子要素が入り切らない場合、指定のした子要素が他の子要素に対してどれくらい縮むかを指定します。
数値のみ指定可能で初期値は1です。(マイナス値は無効)
子要素のベースとなる幅の指定(flex-basisプロパティ)
初期値は autoです。
幅や高さの指定と同じく、パーセンテージやピクセル値で指定できます。
flex-grow、flex-shrink、flex-basisをまとめて指定(flexプロパティ)]
初期値は 0 1 autoです。
子要素の垂直方向の揃え(align-selfプロパティ)
親要素に空きスペースがあった場合、子要素を垂直方向のどの位置に配置するかを指定します。
親要素の align-items より優先されます。
| 値 | 意味 |
|---|---|
| auto | 親要素の align-itemsの指定を継承(初期値) |
| stretch | 親要素の高さか、一番大きい子要素の高さに合わせて広げて配置 |
| flex-end | エンド揃え |
| center | 中央揃え |
| baseline | ベースライン揃え |