display: flex
: フレックス・ボックス・レイアウト CSSプロパティ
このページで解説するコードの実行結果。(タイトルの文字列をクリックすると、コードに移動)
HTML
& CSS
このページでは、以下のコードをデフォルトとして使用している。
.parent { /* 親 */ border: solid orange; /* 境界線 */ margin: 2px; /* 外側の余白 */ padding: 10px; /* 内側の余白 */ width: 30em; /* 幅 */ } .children { /* 子 */ margin: 7px; /* 外側の余白 */ padding: 7px; /* 内側の余白 */ } .child-1 { /* 子1 */ background-color: #daa; /* 背景色 */ } .child-2 { /* 子2 */ background-color: #ada; /* 背景色 */ } .child-3 { /* 子3 */ background-color: #aad; /* 背景色 */ } .g-children { /* 孫 */ margin: 5px; /* 外側の余白 */ padding: 5px; /* 内側の余白 */ background-color: #eee; /* 背景色 */ }
<div class="parent"><!-- 親 --> <div class="children child-1">子1 </div> <div class="children child-2">子2 <div class="g-children">孫</div> </div> <div class="children child-3">子3 <div class="g-children">孫1</div> <div class="g-children">孫2</div> </div> </div>
.parent { /* 親 */ display: flex; /* flex inline-flex */ /* flex-flow: row nowrap; */ flex-direction: row; /* row row-reverse column column-reverse */ flex-wrap: nowrap; /* nowrap wrap wrap-reverse */ align-items: stretch; /* flex-start flex-end center baseline stretch */ justify-content: flex-start; /* flex-start flex-end center space-between space-around */ align-content: stretch; /* flex-start flex-end center space-between space-around stretch */ } .children { /* 子 */ order: 0; /* 整数 */ align-self: auto; /* auto flex-start flex-end center baseline stretch */ /* flex: 0 1 auto ; */ flex-grow: 0; /* 0以上の整数 */ flex-shrink: 1; /* 0以上の整数 */ flex-basis: auto; }
概要
このページではフレックス・ボックス・レイアウト(display: flex;
)について説明する。他のdisplay
プロパティ(block
、inline
など)についてはこちらのページを参照。
CSSプロパティ | 設定内容 | 設定する対象 |
---|---|---|
display | flex (縦並び) or inline-flex (横並び)、 | 親要素 |
flex-flow | flex-direction と flex-wrap の一括指定 | 親要素 |
flex-direction | 向きを指定する。 | 親要素 |
flex-wrap | 改行(折り返し)を指定する | 親要素 |
order | 並びの順番を指定する | 子要素 |
align-items | 上下の位置を指定する | 親要素 |
align-self | 上下の位置を個別に指定する | 子要素 |
flex | flex-grow 、flex-shrink 、flex-basis の一括指定 | 子要素 |
flex-grow | 子要素の幅の広がり具合を指定する | 子要素 |
flex-shrink | 子要素の幅の縮み具合を指定する | 子要素 |
flex-basis | 子要素の幅を指定する | 子要素 |
justify-content | 子要素の左右間隔を指定する | 親要素 |
align-content | 行の上下間隔を指定する | 親要素 |
(補足) inline-block
横並びにするだけなら「display: inline-block;
」を使ってでもできる。
しかし、display: flex;
はより細かい設定が可能。
display: flex
親要素(.parent
)に対してdisplay: flex;
を指定する。
子要素(.children
)は横並びになる。(理由: flex-direction
のデフォルト値がrow
だから。)
また、「子1」と「子2」は、「子3の高さ」に合わせる形で引き延ばされている。(理由: align-items
のデフォルト値がstretch
だから。)
.parent { display: flex; width: 15em; }
親要素にdisplay: flex;
の設定をしないと、以降のプロパティは機能しないことに注意。
inline-flex
display: flex;
の替わりに、display: inline-flex;
を設定してもフレックス・ボックスになる。
その違いは block
とinline-block
の違いと同じで、横並びになるだけ。
# | 縦並び | 横並び |
---|---|---|
ボックス | block | inline-block |
フレックス・ボックス | flex | inline-flex |
このように親要素の並び方の違いなので、以降の説明ではflex
だけを使う。
ためしてみる
親要素が2つの場合を考える。display: flex;
の場合は縦並び。
.parent { display: flex; width: 15em; }
<div class="parent"><!-- 親1 --> <div class="children child-1">子1 </div> <div class="children child-2">子2 <div class="g-children">孫</div> </div> <div class="children child-3">子3 <div class="g-children">孫1</div> <div class="g-children">孫2</div> </div> </div> <div class="parent"><!-- 親2 --> <div class="children child-1">子1 </div> <div class="children child-2">子2 <div class="g-children">孫</div> </div> <div class="children child-3">子3 <div class="g-children">孫1</div> <div class="g-children">孫2</div> </div> </div>
display: inline-flex;
に変更すると横並びになる。
.parent { display: inline-flex; width: 15em; }
flex-flow
: 向きと折り返し
flex-direction
(向き)とflex-wrap
(改行/折り返し)を一括で指定する。
(つまり、 flex-direction
とflex-wrap
を個々に設定してもいいけど、まとめた方が楽だ、ということ。)
flex-direction | 「左→右」、「右→左」、「上→下」、「下→上」 |
flex-wrap | 「改行しない」、「(上→下に)改行する」、「(下→上に)改行する」 |
設定可能な値は下表。
設定値 | 機能 | デフォルト | 同じ機能の別の書き方 |
---|---|---|---|
row nowrap | 左→右/改行しない | ○ | 無指定 |
row wrap | 左→右/改行する | flex-wrap: wrap; | |
row wrap-reverse | 左→右/改行する(下→上) | flex-wrap: wrap-reverse; | |
row-reverse nowrap | 右→左/改行しない | flex-direction: row-reverse; | |
row-reverse wrap | 右→左/改行する | flex-direction: row-reverse; flex-wrap: wrap; | |
row-reverse wrap-reverse | 右→左/改行する(下→上) | flex-direction: row-reverse; flex-wrap: wrap-reverse; | |
column nowrap | 上→下/改行しない | flex-direction: column; | |
column wrap | 上→下/改行する ※ 実質的にあまり意味がない | flex-direction: column; flex-wrap: wrap; | |
column wrap-reverse | 上→下/改行する(下→上) ※ 実質的にあまり意味がない | flex-direction: column; flex-wrap: wrap-reverse; | |
column-reverse nowrap | 下→上/改行しない | flex-direction: column-reverse; | |
column-reverse wrap | 下→上/改行する ※ 実質的にあまり意味がない | flex-direction: column-reverse; flex-wrap: wrap; | |
column-reverse wrap-reverse | 下→上/改行する(下→上) ※ 実質的にあまり意味がない | flex-direction: column-reverse; flex-wrap: wrap-reverse; |
flex-direction
: 並びの向き
設定値 | 機能 | デフォルト |
---|---|---|
row | 横並び(正順):左→右 | ○ |
row-reverse | 横並び(逆順):右→左 | |
column | 縦並び(正順) :上→下 | |
column-reverse | 縦並び(逆順) :下→上 |
row
: 左→右
.parent { display: flex; flex-direction: row; }
flex-direction
を無指定の場合
flex-direction
のデフォルト値なので、無指定の場合でも同じ結果。
.parent { display: flex; }
row-reverse
: 右→左
.parent { display: flex; flex-direction: row-reverse; }
column
: 上→下
.parent { display: flex; flex-direction: column; }
display: flex;
を無指定の場合
display: flex;
を無指定しても、同じように上→下になる。(ブロック要素のデフォルトだから)
.parent { }
column-reverse
: 下→上
.parent { display: flex; flex-direction: column-reverse; }
flex-wrap
: 改行
「改行しない」「改行する」「逆順に改行する」から選択。
設定値 | 機能 | デフォルト |
---|---|---|
nowrap | 改行しない。 | ○ |
wrap | 正順に改行する。 | |
wrap-reverse | 逆順に改行する。 |
nowrap
: 改行しない
折り返さない。
.parent { width: 11em; display: flex; flex-wrap: nowrap; }
※ 折り返しを確認するため、width: 11em;
にして幅を狭めている。
wrap
: 正順に改行する
折り返す。
.parent { width: 11em; display: flex; flex-wrap: wrap; }
row-reverse
:右→左
右→左 /折り返す
.parent { width: 11em; display: flex; flex-flow: row-reverse wrap; }
column
: 上→下
上→下/折り返す(実質的にあまり意味がない)
.parent { width: 11em; display: flex; flex-flow: column wrap; }
column-reverse
: 下→上
下→上/折り返す(実質的にあまり意味がない)
.parent { width: 11em; display: flex; flex-flow: column-reverse wrap; }
wrap-reverse
: 逆順に改行する
折り返す(行は逆順)。
.parent { width: 11em; display: flex; flex-wrap: wrap-reverse; }
row-reverse
:右→左
右→左/折り返す(行は逆順)。
.parent { width: 11em; display: flex; flex-flow: row-reverse wrap-reverse; }
column
: 上→下
上→下/折り返す(行は逆順)。(実質的にあまり意味がない)
.parent { width: 11em; display: flex; flex-flow: column wrap-reverse; }
column-reverse
: 下→上
下→上/折り返す(行は逆順)。(実質的にあまり意味がない)
.parent { width: 11em; display: flex; flex-flow: column-reverse wrap-reverse; }
order
: 順番
デフォルト値は0
である。
とりあえず、「子2(.child-2
)」の順番を変えてみる。
子2のorder
に-1
などマイナスの値を設定すると、子2が先頭に来る。(デフォルト値は0
だから)
.parent { display: flex; } .child-2 { order: -1; }
1
などプラスの値を設定すると、子2が最後に来る。(「子1」と「子3」はデフォルトの0
なので前に来る)
.parent { display: flex; } .child-2 { order: 1; }
全部の子要素のorder
プロパティを指定すると、分かりやすくなる。
.parent { display: flex; } .child-3 { order: 1; } .child-1 { order: 2; } .child-2 { order: 3; }
align-items
: 上下位置
親要素に指定する。
設定値 | 機能 | デフォルト |
---|---|---|
stretch | 上下に延ばす | ○ |
flex-start | 上揃え | |
center | 中央揃え | |
flex-end | 下揃え |
※ 子要素を個別に指定したい場合は、子要素にalign-self
プロパティを設定する。
stretch
: 引き延ばす
子要素が縦方向に引き延ばされる。
.parent { display: flex; align-items: stretch; }
無指定/normal
の場合
stretch
がデフォルト値であるので、無指定でも同じ結果。
.parent { display: flex; }
normal
でも同じ結果。
.parent { display: flex; align-items: normal; }
flex-start
: 上揃え
(引き延ばされないで)上揃え。
.parent { display: flex; align-items: flex-start; }
center
: 中央揃え
(引き延ばされないで)中央揃え。
.parent { display: flex; align-items: center; }
flex-end
: 下揃え
(引き延ばされないで)下揃え。
.parent { display: flex; align-items: flex-end; }
align-self
: 上下の個別指定
align-items
と異なり、子要素に対して設定することに注意。
設定値 | 機能 | デフォルト |
---|---|---|
stretch | 上下に延ばす | ○ |
flex-start | 上揃え | |
center | 中央揃え | |
flex-end | 下揃え |
flex-start
: 上揃え
全体が中央揃え(center
)だが、子1(.child-1
)のみ上揃え(flex-start
)にした例。
.parent { display: flex; align-items: center; } .child-1 { align-self: flex-start; }
center
: 中央揃え
全体が上揃え(flex-start
)だが、子1(.child-1
)のみ中央揃え(center
)にした例。
.parent { display: flex; align-items: flex-start; } .child-1 { align-self: center; }
flex-end
: 下揃え
全体が中央揃え(center
)だが、子1(.child-1
)のみ下揃え(flex-end
)にした例。
.parent { display: flex; align-items: center; } .child-1 { align-self: flex-end; }
flex
: 幅の一括指定
flex
は以下のプロパティを一括で指定するCSSプロパティである。
設定値 | 機能 | デフォルト |
---|---|---|
flex-grow | 値が大きいほど、幅が広くなる | 0 |
flex-shrink | 値が大きいほど、幅が狭くなる | 1 |
flex-basis | 横幅を指定する(width と同じ) | auto |
指定する順番は以下のどちらか。( つまり、flex-shrink
は常にflex-grow
の後ろ。 )
flex-grow , flex-shrink , flex-basis |
flex-basis , flex-grow , flex-shrink |
例。
.parent { display: flex; } .children { flex: 1 1 auto; }
flex-grow
: 広がり具合
全ての子要素に1
を指定すると、均等に幅が広くなる。
.parent { display: flex; } .children { flex-grow: 1; }
子1(.child-1
)のflex-grow
を2
に変更する。子1の増加分が多い。
.parent { display: flex; } .children { flex-grow: 1; } .child-1 { flex-grow: 2; }
3
に変更する。子1の増加分が更に多くなる。
.parent { display: flex; } .children { flex-grow: 1; } .child-1 { flex-grow: 3; }
子3(.child-3
)のflex-grow
を2
に変更する。子1→子3→子2の順に幅が広くなる。
.parent { display: flex; } .children { flex-grow: 1; } .child-1 { flex-grow: 3; } .child-3 { flex-grow: 2; }
デフォルトは0
0
を指定すると、元の幅に戻る。
.parent { display: flex; } .children { flex-grow: 0; }
これはデフォルト値なので無指定の時と同じ。
flex-shrink
: 縮み具合
子要素の幅を、親要素(幅:30em
)からはみ出るくらい広くしてみる。
一定の比率で縮まって、親要素に収まっている。
.parent { display: flex; } .children { width: 15em; }
これは、flex-shrink
のデフォルト値が1
であるため。
.parent { display: flex; } .children { width: 15em; flex-shrink: 1; }
子1(child-1
)のflex-shrink
を2
にすると、子1のみが更に縮まる。
.parent { display: flex; } .children { width: 15em; flex-shrink: 1; } .child-1 { flex-shrink: 2; }
3
にすると、子1は更に縮まる。
.parent { display: flex; } .children { width: 15em; flex-shrink: 1; } .child-1 { flex-shrink: 3; }
子3(child-3
)のflex-shrink
を2
にすると、子1→子3→子2の順に狭くなる。
.parent { display: flex; } .children { width: 15em; flex-shrink: 1; } .child-1 { flex-shrink: 3; } .child-3 { flex-shrink: 2; }
0
にすると、縮まらない。
0
を指定すると、親要素に収まらないではみ出る。
.parent { display: flex; } .children { width: 15em; flex-shrink: 0; }
flex-basis
: 幅
実質的にwidth
プロパティと同じである。異なる点は以下。
display: flex;
要素の子要素でしか使えない。width
プロパティとflex-basis
プロパティの両方が指定された場合、flex-basis
が優先される。
幅を15em
にしてみる。
.parent { display: flex; } .children { flex-basis: 15em; }
幅を3em
にしてみる。
.parent { display: flex; } .children { flex-basis: 3em; }
flex-grow: 1;
を指定すると、横幅が広まる。
.parent { display: flex; } .children { flex-basis: 3em; flex-grow: 1; }
justify-content
: 左右間隔
設定値 | 機能 | デフォルト |
---|---|---|
flex-start | 左寄せ | ○ |
center | 中央揃え | |
flex-end | 右寄せ | |
space-between | 均等配置(左右は詰める) | |
space-around | 均等配置(左右も開ける) |
flex-start
: 左寄せ
.parent { display: flex; justify-content: flex-start; }
center
: 中央揃え
.parent { display: flex; justify-content: center; }
flex-end
: 右寄せ
.parent { display: flex; justify-content: flex-end; }
space-between
: 均等配置(左右は詰める)
.parent { display: flex; justify-content: space-between; }
space-around
: 均等配置(左右も開ける)
.parent { display: flex; justify-content: space-around; }
align-content
: 行間
この設定は折り返しによる行間を指定するので、flex-wrap
がwrap
orwrap-reverse
以外の場合(つまり、nowrap
の場合)、機能しない。
設定値 | 機能 | デフォルト |
---|---|---|
stretch | 上下に引き延ばす | ○ |
flex-start | 上寄せ | |
center | 中央揃え | |
flex-end | 下寄せ | |
space-between | 均等配置(上下は詰める) | |
space-around | 均等配置(上下も開ける) |
stretch
: 上下に引き延ばす
.parent { height: 30em; width: 11em; display: flex; flex-wrap: wrap; align-content: stretch; }
flex-start
: 上寄せ
.parent { height: 30em; width: 11em; display: flex; flex-wrap: wrap; align-content: flex-start; }
center
: 中央揃え
.parent { height: 30em; width: 11em; display: flex; flex-wrap: wrap; align-content: center; }
flex-end
: 下寄せ
.parent { height: 30em; width: 11em; display: flex; flex-wrap: wrap; align-content: flex-end; }
space-between
: 均等配置(上下は詰める)
.parent { height: 30em; width: 11em; display: flex; flex-wrap: wrap; align-content: space-between; }
space-around
: 均等配置(上下も開ける)
.parent { height: 30em; width: 11em; display: flex; flex-wrap: wrap; align-content: space-around; }
Emmet : df
記述 | Visual Studio Code |
---|---|
df | display: flex; |
fxf | flex-flow: ; |
fxd | flex-direction: row; |
fxw | flex-wrap: nowrap; |
ord | order: ; |
ai | align-items: flex-start; |
as | align-self: auto; |
fx | flex: ; |
fxg | flex-grow: ; |
fxs | flex-shrink: ; |
fxb | flex-basis: fill; |
jc | justify-content: flex-start; |
ac | align-content: flex-start; |
リンク
- W3C(英語) > CSS Flexible Box Layout Module Level 1 ( 勧告候補 ) > #flex-containers
- W3C(英語) > CSS Flexible Box Layout Module Level 1 ( 勧告候補 ) > #flex-flow-property
- W3C(英語) > CSS Flexible Box Layout Module Level 1 ( 勧告候補 ) > #propdef-flex-direction
- W3C(英語) > CSS Flexible Box Layout Module Level 1 ( 勧告候補 ) > #propdef-flex-wrap
- W3C(英語) > CSS Flexible Box Layout Module Level 1 ( 勧告候補 ) > #propdef-order
- W3C(英語) > CSS Flexible Box Layout Module Level 1 ( 勧告候補 ) > #propdef-align-items
- W3C(英語) > CSS Flexible Box Layout Module Level 1 ( 勧告候補 ) > #propdef-align-self
- W3C(英語) > CSS Flexible Box Layout Module Level 1 ( 勧告候補 ) > #propdef-flex
- W3C(英語) > CSS Flexible Box Layout Module Level 1 ( 勧告候補 ) > #propdef-flex-grow
- W3C(英語) > CSS Flexible Box Layout Module Level 1 ( 勧告候補 ) > #propdef-flex-shrink
- W3C(英語) > CSS Flexible Box Layout Module Level 1 ( 勧告候補 ) > #propdef-flex-basis
- W3C(英語) > CSS Flexible Box Layout Module Level 1 ( 勧告候補 ) > #propdef-justify-content
- W3C(英語) > CSS Flexible Box Layout Module Level 1 ( 勧告候補 ) > #propdef-align-content