フレックスボックス超入門 主軸と交差軸の方向をマスターする
要素が横並びになる
親要素がdisplay: block のときは、子要素は縦並びになります。
親要素がdisplay: flex のときは、子要素は横並びになります。
ボタンをクリックしてみてください！
1
2
3
初期設定では、子要素は折り返さない
以下は、子要素の幅が300pxで横並びで、 親要素の幅を超えるように設定してあります。
この時、子要素の横幅の指定は適用されず、折り返されないまま、親要素に収まるようになります。
.oya-yoso {
display: flex;
}
.ko-yoso{
width: 300px;
}1
2
3
4
5
折り返すにはflex-wrapを指定する。
.oya-yoso {
display: flex;
flex-wrap: wrap;
}
.ko-yoso{
width: 300px;
}1
2
3
4
5
主軸と交差軸を理解する
主軸とは、要素が並ぶ方向。flex-directionで設定
交差軸とは、要素が折り返される方向。flex-wrapで設定
flex-direction : row
flex-wrap : wrap
主軸
主軸
交差軸
交差軸
1
2
3
4
5
6
7
8
9
10
主軸と交差軸を一行で指定するflex-flow
主軸と交差軸を一行で指定してくれます。
flex-direction: colomn;
flex-wrap: wrap
⇓
flex-flow: column wrap;
.oya-yoso {
display: flex;
flex-flow: row wrap; /* 主軸：右方向 / 交差軸：下方向 */
flex-flow: row wrap-reverse; /* 主軸：右方向 / 交差軸：上方向 */
flex-flow: row-reverse wrap; /* 主軸：左方向 / 交差軸：下方向 */
flex-flow: row-reverse wrap-reverse; /* 主軸：左方向 / 交差軸：上方向 */
flex-flow: column wrap; /* 主軸：下方向 / 交差軸：右方向 */
flex-flow: column wrap-reverse; /* 主軸：下方向 / 交差軸：左方向 */
flex-flow: column-reverse wrap; /* 主軸：上方向 / 交差軸：右方向 */
flex-flow: column-reverse wrap-reverse; /* 主軸：上方向 / 交差軸：左方向 */
} 「主軸」と水平方向の子要素の揃え方
主軸
1
2
3
4
5
「主軸」と垂直方向の子要素の揃え方（1行）
主軸
1
2
3
4
5
「主軸」と垂直方向の子要素の揃え方（複数行）
主軸
1
2
3
4
5
まとめ
1
2
3
4
5
6
7
8
9
10
flex-wrap
要素の折り返しを指定する
flex-direction
「主軸」「交差軸」を入れ替える
justify-content
「主軸」と水平方向の子要素の揃え方
align-items
「主軸」と垂直方向の子要素の揃え方（1行）
align-content
「主軸」と垂直方向の子要素の揃え方（複数行）
親要素の高さ変更
