Flexboxについて
Flexboxとは
FlexboxとはFlexible Box Layout Moduleの略です。
このFlexBOXを利用して行うレイアウトをFlexレイアウトを呼びます。
要素の縦・横の並びなどの順序指定や上下左右の入れ替えが出来る機能です。
Flexレイアウト
Flexレイアウトは大きく分けて２種類の要素に分けられており、設定出来るプロパティが異なります。
Flexコンテナー
Flexレイアウトを行うための親の箱です。display:flexと設定することでFlexコンテナーになります。
Flexコンテナーとなった箱は更に、内容の並ぶ方向(横・縦) / 横方向の整列方法 / 縦方向の整列方法 / 折り返し方法などを同時に設定することができます。
Flexアイテム
Flexアイテムとは、親の箱にdisplay:flex;を指定し、Flexコンテナーとなった要素内に直接入っているアイテムのことです。
Flexコンテナー内に直接入っている要素は全て(※)自動的にFlexアイテムとなります。
Flexアイテムとなった要素は更に 並び順 / 伸縮比率 / 個別の縦位置などを簡単に設定することができます。
Flexコンテナーで指定できるプロパティ
指定できるプロパティ
flex-direction
指定できる値
横並びに使用
- row
- row-reverse
縦並びに使用
- column
- column-reverse
flex-wrap
指定できる値
flex-flow
指定できる値
justify-content
指定できる値
align-items
指定できる値
align-content
指定できる値
flex-direction
Flexコンテナーの内容の並ぶ方向を指定できます。
主軸の方向や向き（通常または逆方向）を定義することにより、フレックスコンテナー内でフレックスアイテムを配置する方法を設定できます。
.flex {
display: flex;
flex-direction: row;
}
指定できる値
横並びに使用
- row
- row-reverse
縦並びに使用
- column
- column-reverse
flex-wrap
Flexコンテナーの内容の横幅の合計値が、Flexコンテナー自体の横幅を超過する場合の折り返しの方法を指定します。
フレックスアイテムを単一行に押し込むか、あるいは複数行に折り返してもよいかを指定します。
.flex {
display: flex;
flex-wrap: wrap;
}
指定できる値
- no-wrap
- wrap
- wrap-reverse
flex-flow
flex-directionとflex-wrapをまとめて指定します。
一括指定プロパティで、フレックスコンテナーの向きと折り返しの動作を同時に指定できます。
.flex {
display: flex;
flex-flow: row wrap;
}
justify-content
Flexコンテナーの内容の横方向の整列方法を指定できます。
フレックスコンテナーの主軸およびグリッドコンテナーのインライン軸に沿って、中身のアイテムの間や周囲に間隔を配置する方法を定義します。
.flex {
display: flex;
justify-content: flex-start;
}
指定できる値
- flex-start
- flex-end
- center
- space-bertween
- space-around
align-items
Flexコンテナーの内容の縦方向の整列方法を指定できます。 基本的には、内容が1行の場合に使用します。内容が複数行になる場合は、1行ごとにそれぞれ整列されます。
すべての直接の子要素に集合として align-self の値を設定します。フレックスボックスでは交差軸方向のアイテムの配置を制御します。グリッドレイアウトでは、グリッド領域におけるアイテムのブロック軸方向の配置を制御します。
.flex {
display: flex;
align-items: center;
}
指定できる値
- stretch
- flex-start
- flex-end
- center
- baseline
align-content
Flexコンテナーの内容が複数行になった際の整列方法を指定できます。 内容が1行しかない場合は効果がありません。
フレックスボックスの交差軸またはグリッドのブロック軸方向の内部のアイテムの間または周囲の空間の配分方法を設定します。
flex {
display: flex;
align-content: flex-end;
}
指定できる値
- stretch
- flex-start
- flex-end
- center
- space-between
- space-around
Flexアイテムで指定できるプロパティ
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
order
.flex > div:nth-child(1) {
order: 3;
}
.flex > div:nth-child(2) {
order: 4;
}
.flex > div:nth-child(3) {
order: 1;
}
.flex > div:nth-child(4) {
order: 2;
}
flex-grow
.flex > div:nth-child(1) {
flex-grow: 0;
}
.flex > div:nth-child(2) {
flex-grow: 1;
}
.flex > div:nth-child(3) {
flex-grow: 2;
}
.flex > div:nth-child(4) {
flex-grow: 3;
}
flex-shrink
.flex > div {
width: 300px;
}
.flex > div:nth-child(1) {
flex-shrink: 0;
}
.flex > div:nth-child(2) {
flex-shrink: 1;
}
.flex > div:nth-child(3) {
flex-shrink: 2;
}
.flex > div:nth-child(4) {
flex-shrink: 3;
}
flex-basis
.flex {
display: flex;
/* flex-direction: row; */
}
.flex > div{
flex-basis: 100px;
}
flex
.flex > div {
/* 単位がない数値を1つ指定 → flex-growに */
flex: 2;
/* 単位のある数値を1つ指定 → flex-basisに */
flex: 10em;
flex: 30%;
/* 単位がない数値を2つ指定 → flex-grow | flex-shrink に */
flex: 2 2;
/* 値を3つ指定する → 必ず flex-grow | flex-shrink | flex-basis に */
flex: 2 2 10%;
}
align-self
.flex > div:nth-child(2) {
align-self: flex-start;
}
指定できる値
- auto(初期値)
- flex-start
- flex-end
- center
- stretch
- baseline
参考サイト（引用元）
Flexコンテナー
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
Discussion