CSSFlexコンテナ_
親要素（コンテナ）
前の章で指定したように、これは3つのフレックスアイテムを含むフレックスコンテナ （青い領域）です。
1
2
3
displayプロパティを
flex次のように設定すると、フレックスコンテナが柔軟になります。
例
.flex-container {
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プロパティは、フレックスアイテムをラップするかどうかを指定します。
以下の例には、プロパティをよりよく示すために、12個のフレックスアイテムがあり
flex-wrapます。
1
2
3
4
5
6
7
8
9
10
11
12
例
このwrap値は、必要に応じてフレックスアイテムが折り返されることを指定します。
.flex-container {
display: flex;
flex-wrap: wrap;
}
例
このnowrap値は、フレックスアイテムがラップしないことを指定します（これはデフォルトです）。
.flex-container {
display: flex;
flex-wrap: nowrap;
}
例
このwrap-reverse値は、柔軟なアイテムが必要に応じて逆の順序で折り返されることを指定します。
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
フレックスフロープロパティ
プロパティは、と
プロパティflex-flowの両方を設定するための省略形のプロパティです。
flex-directionflex-wrap
例
.flex-container {
display: flex;
flex-flow: row wrap;
}
justify-contentプロパティ
このjustify-contentプロパティは、フレックスアイテムを整列させるために使用されます。
1
2
3
例
このcenter値は、フレックスアイテムをコンテナの中央に揃えます。
.flex-container {
display: flex;
justify-content: center;
}
例
このflex-start値は、コンテナの先頭にフレックスアイテムを配置します（これはデフォルトです）。
.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
これらの例では、プロパティをより適切に示すために、高さ200ピクセルのコンテナを使用してい
align-itemsます。
例
このcenter値は、コンテナの中央にあるフレックスアイテムを整列させます。
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
例
このflex-start値は、コンテナの上部にあるフレックスアイテムを整列させます。
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
例
このflex-end値は、コンテナの下部にあるフレックスアイテムを整列させます。
.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
align-contentプロパティ
このalign-contentプロパティは、フレックスラインを整列させるために使用されます。
1
2
3
4
5
6
7
8
9
10
11
12
これらの例では、プロパティをより適切に示すために、
flex-wrapプロパティがに設定された高さ600ピクセルのコンテナを使用しています。wrapalign-content
例
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-container {
display: flex;
height: 300px;
justify-content:
center;
align-items: center;
}
CSSFlexboxコンテナのプロパティ
次の表に、CSSFlexboxコンテナのすべてのプロパティを示します。
| Property | Description |
|---|---|
| align-content | Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines |
| align-items | Vertically aligns the flex items when the items do not use all available space on the cross-axis |
| display | Specifies the type of box used for an HTML element |
| flex-direction | Specifies the direction of the flexible items inside a flex container |
| flex-flow | A shorthand property for flex-direction and flex-wrap |
| flex-wrap | Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line |
| justify-content | Horizontally aligns the flex items when the items do not use all available space on the main-axis |