CSSフレックスコンテナ
親要素(コンテナー)
前の章で指定したように、これは3つのフレックス項目を含むフレックスコンテナ(青色の領域)です。
1
2
3
displayをflexに設定すると、フレックスコンテナーが柔軟になります。
フレックスコンテナーのプロパティは次のとおりです。
flex-directionプロパティ
flex-directionプロパティは、コンテナがフレックス項目をどの方向にスタックするかを定義します。
1
2
3
例
columnの値は、フレックス項目を垂直方向 (上から下) に積み重ねます。
.flex-container {
display: flex;
flex-direction: column;
}
例
column-reverse値は、フレックス項目を垂直方向に (ただし下から上に) 積み重ねます。
.flex-container {
display: flex;
flex-direction: column-reverse;
}
例
rowの値は、フレックス項目を水平方向 (左から右) に積み重ねます。
.flex-container {
display: flex;
flex-direction: row;
}
例
row-reverse値は、フレックス項目を水平方向(ただし右から左へ)にスタックします。
.flex-container {
display: flex;
flex-direction: row-reverse;
}
flex-wrapプロパティ
flex-wrapプロパティは、フレックス項目をラップするかどうかを指定します。
以下の例には、flex-wrapプロパティをよりよく示すために 12 個のflex項目があります。
1
2
3
4
5
6
7
8
9
10
11
12
例
nowrap値は、フレックス項目が折り返されないことを指定します(これがデフォルトです)。
.flex-container {
display: flex;
flex-wrap: nowrap;
}
例
wrap-reverse値は、フレキシブル項目が必要に応じて逆の順序でラップされることを指定します。
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
フレックスフロープロパティ
flex-flowプロパティは、flex-directionプロパティとflex-wrap`プロパティの両方を設定するための短縮プロパティです。
justify-contentプロパティ
justify-contentプロパティは、フレックス項目を配置するために使用されます。
1
2
3
例
centerの値は、フレックス項目をコンテナーの中央に配置します。
.flex-container {
display: flex;
justify-content: center;
}
例
のflex-startvalue はコンテナの先頭にフレックスアイテムを配置します (これがデフォルトです):
.flex-container {
display: flex;
justify-content: flex-start;
}
例
flex-end値は、コンテナの先頭にフレックス項目を配置します (これがデフォルトです)。
.flex-container {
display: flex;
justify-content: flex-end;
}
例
space-around値は、行の前後にスペースを入れてフレックス項目を表示します。
.flex-container {
display: flex;
justify-content: space-around;
}
例
space-between値は、行間にスペースを入れてフレックス項目を表示します。
.flex-container {
display: flex;
justify-content: space-between;
}
align-itemsプロパティ
align-itemsプロパティは、フレックス項目を整列させるために使用されます。
1
2
3
これらの例では、align-itemsプロパティをより適切に示すために、高さ200ピクセルのコンテナを使用します。
例
centerの値は、フレックス項目をコンテナーの中央に配置します。
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
例
flex-start値は、コンテナの上部にあるflex項目を揃えます。
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
例
flex-end値は、コンテナの下部にあるflex項目を揃えます。
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
例
stretch値は、コンテナを満たすようにフレックス項目をストレッチします (これがデフォルトです)。
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
例
baseline値は、ベースラインの位置合わせなど、フレックス項目を位置合わせします。
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
ノート：この例では、項目がテキストのベースラインに合わせて配置されることを示すために、異なるフォント サイズを使用しています。
1
2
3
4
align-content プロパティ
align-contentプロパティは、フレックスラインを整列させるために使用されます。
1
2
3
4
5
6
7
8
9
10
11
12
これらの例では、align-contentプロパティをより適切に示すために、flex-wrapプロパティをwrapに設定した高さ600ピクセルのコンテナを使用します。
例
space-betweenの値により、フレックスラインが等間隔で表示されます。
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
例
space-around値は、フレックスラインの前後にスペースを入れて表示します。
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}
例
stretch値は、フレックスラインを引き伸ばして残りのスペースを占めます(これがデフォルトです)。
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}
例
centerの値は、コンテナーの中央にフレックス ラインを表示します。
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
例
flex-start値は、コンテナの先頭にフレックスラインを表示します。
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}
例
flex-end値は、コンテナの最後にフレックスラインを表示します。
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}
完璧なセンタリング
次の例では、非常に一般的なスタイルの問題である完璧なセンタリングを解決します。
解決：justify-contentプロパティとalign-itemsプロパティの両方をcenterに設定すると、flexアイテムが完全に中央に配置されます。
例
.flex-container {
display: flex;
height: 300px;
justify-content: center;
align-items: center;
}
自分で試してみる»
display: flex;
height: 300px;
justify-content: center;
align-items: center;
}
CSS Flexboxコンテナーのプロパティ
次の表に、CSS Flexboxコンテナーのすべてのプロパティを示します。
|
プロパティ |
説明 |
|---|---|
| align-content | flex-wrap プロパティの動作を変更します。 align-items に似ていますが、フレックス アイテムを整列する代わりに、フレックス ラインを整列します。 |
| align-items | 項目が交差軸上の使用可能なすべてのスペースを使用していない場合、フレックス項目を垂直方向に揃えます |
| display | HTML 要素に使用されるボックスのタイプを指定します |
| flex-direction | フレックス コンテナ内のフレキシブル アイテムの方向を指定します |
| flex-flow | flex-direction と flex-wrap の簡略プロパティ |
| flex-wrap | 1 つのフレックス ラインに十分なスペースがない場合、フレックス アイテムを折り返すかどうかを指定します。 |
| justify-content | 項目が主軸の使用可能なすべてのスペースを使用していない場合、フレックス項目を水平方向に整列させます |