CSSのdisplayプロパティのflex、inline-flexの使い方

CSSのdisplayプロパティのflex、inline-flexの使い方


display:flex

ある要素に定義すると、その子要素が並列に並ぶ。
display:inline-boxは横に並べたい各要素(子要素側)に定義するが、 display:flexは親要素に定義するだけで子要素が並ぶ。


1つ目の
display:flexの
子要素
1つ目の
display:flexの
子要素
1つ目の
display:flexの
子要素
2つ目の
display:flexの
子要素
2つ目の
display:flexの
子要素
2つ目の
display:flexの
子要素



display:inline-flexの場合

ある要素に定義すると、その子要素が並列に並ぶのはflexと同じ。
「inline-block」の性質も併せ持つためflexと違ってinline-flexの要素同士を横並びにできる
1つ目の
display:
inline-flexの
子要素
1つ目の
display:
inline-flexの
子要素
1つ目の
display:
inline-flexの
子要素
2つ目の
display:
inline-flexの
子要素
2つ目の
display:
inline-flexの
子要素
2つ目の
display:
inline-flexの
子要素




display:flexでflex-wrapを定義して子要素の折り返しを指定する

display:flexでflex-wrapを定義すると、その子要素の折り返し方法を指定できる。

flex-wrap:nowrap (折り返ししない[初期値])

1つ目の子要素
2つ目の子要素
3つ目の子要素
4つ目の子要素
5つ目の子要素
6つ目の子要素
7つ目の子要素
8つ目の子要素
9つ目の子要素

flex-wrap:wrap (折り返す)

1つ目の子要素
2つ目の子要素
3つ目の子要素
4つ目の子要素
5つ目の子要素
6つ目の子要素
7つ目の子要素
8つ目の子要素
9つ目の子要素

flex-wrap:wrap-reverse (逆順で折り返す)

1つ目の子要素
2つ目の子要素
3つ目の子要素
4つ目の子要素
5つ目の子要素
6つ目の子要素
7つ目の子要素
8つ目の子要素
9つ目の子要素




display:flexでjustify-contentを定義して水平方向の揃え方を指定する

display:flexでjustify-contentを定義すると、その子要素の並ぶ方向を指定できる。

justify-content:flex-start (左寄せ[初期値])

1つ目の子要素
2つ目の子要素
3つ目の子要素

justify-content:flex-end (右寄せ)

1つ目の子要素
2つ目の子要素
3つ目の子要素

justify-content:center (中央寄せ)

1つ目の子要素
2つ目の子要素
3つ目の子要素

justify-content:space-between(隙間を均等)

1つ目の子要素
2つ目の子要素
3つ目の子要素

justify-content:space-around(左右を含む隙間を均等)

1つ目の子要素
2つ目の子要素
3つ目の子要素




display:flexでalign-itemsを定義して垂直方向の揃え方を指定する

display:flexでalign-itemsを定義すると、その子要素の並ぶ方向を指定できる。

align-items:stretch (子要素を親要素の高さに合わせる[初期値])

12ptの子要素
内で改行した
18ptの子要素
24ptの子要素

align-items:flex-start (上揃え)

12ptの子要素
内で改行した
18ptの子要素
24ptの子要素

align-items:flex-end (下揃え)

12ptの子要素
内で改行した
18ptの子要素
24ptの子要素

align-items:center (上下中央揃え)

12ptの子要素
内で改行した
18ptの子要素
24ptの子要素

align-items:baseline (1行目の文字列のベースライン揃え)

12ptの子要素
内で改行した
18ptの子要素
24ptの子要素




display:flexでalign-contentを定義して折り返したときの複数行の揃え方を指定する

display:flexでflex-wrap:wrap(折り返し)を指定した時にalign-contentを定義すると、複数行の揃え方を指定できる。

align-content:stretch (親要素の高さにストレッチ[初期値])

1つ目の子要素
brで改行
2つ目の子要素
3つ目の子要素
4つ目の子要素
5つ目の子要素
6つ目の子要素
7つ目の子要素
8つ目の子要素
9つ目の子要素
10個目の子要素
brで改行
11個目の子要素
12個目の子要素

align-content:flex-start (上寄せ。子要素の高さは行ごとに自動)

1つ目の子要素
brで改行
2つ目の子要素
3つ目の子要素
4つ目の子要素
5つ目の子要素
6つ目の子要素
7つ目の子要素
8つ目の子要素
9つ目の子要素
10個目の子要素
brで改行
11個目の子要素
12個目の子要素

align-content:flex-end (下寄せ。子要素の高さは行ごとに自動)

1つ目の子要素
brで改行
2つ目の子要素
3つ目の子要素
4つ目の子要素
5つ目の子要素
6つ目の子要素
7つ目の子要素
8つ目の子要素
9つ目の子要素
10個目の子要素
brで改行
11個目の子要素
12個目の子要素

align-content:center (上下中央寄せ。子要素の高さは行ごとに自動)

1つ目の子要素
brで改行
2つ目の子要素
3つ目の子要素
4つ目の子要素
5つ目の子要素
6つ目の子要素
7つ目の子要素
8つ目の子要素
9つ目の子要素
10個目の子要素
brで改行
11個目の子要素
12個目の子要素

align-content:space-between (隙間を均等。子要素の高さは行ごとに自動)

1つ目の子要素
brで改行
2つ目の子要素
3つ目の子要素
4つ目の子要素
5つ目の子要素
6つ目の子要素
7つ目の子要素
8つ目の子要素
9つ目の子要素
10個目の子要素
brで改行
11個目の子要素
12個目の子要素

align-content:space-around (上下を含む隙間を均等。子要素の高さは行ごとに自動)

1つ目の子要素
brで改行
2つ目の子要素
3つ目の子要素
4つ目の子要素
5つ目の子要素
6つ目の子要素
7つ目の子要素
8つ目の子要素
9つ目の子要素
10個目の子要素
brで改行
11個目の子要素
12個目の子要素




display:flexでflex-directionを定義して並び順を指定する

display:flexでflex-directionを定義すると、その子要素の並ぶ方向を指定できる。

flex-direction:row (左から右)

1つ目の子要素
2つ目の子要素
3つ目の子要素

flex-direction:row-reverse (右から左)

1つ目の子要素
2つ目の子要素
3つ目の子要素

flex-direction:column (上から下)

1つ目の子要素
2つ目の子要素
3つ目の子要素

flex-direction:column-reverse (下から上)

1つ目の子要素
2つ目の子要素
3つ目の子要素





子要素にalign-selfを定義して子要素ごとに垂直方向の位置揃えを指定する

display:flexで子要素にalign-selfを定義すると、子要素ごとに垂直方向の位置揃えを指定できる。
align-self:auto
[初期値]
親のalign-itemsの値で計算します。
align-self:flex-start
align-self:flex-end
align-self:center
align-self:stretch
align-self:baseline
font-size:10pt
(1行目の文字列のベースライン揃え)
align-self:baseline
font-size:20pt

子要素にflex(拡大比 縮小比 ベースサイズ)プロパティを定義して親要素(display:flex)が拡縮した時の各子要素の拡縮を設定する。

flex:0 0 140px;
140px固定
flex:1 0 140px;
140px以上になる
flex:0 1 auto;
デフォルト値
flex:0 0 140px;
140px固定

最後の子要素にmargin-left:auto;を設定すると、最後の子要素だけ右寄せにできる。

子要素1
子要素2
子要素3
子要素に、margin-left:auto;
を入れると、ここだけ右寄せになる



Mam's WebSite