概要へ移動

このページで解説するコードの実行結果。(タイトルの文字列をクリックすると、コードに移動)

子1
子2
子3
孫1
孫2
子1
子2
子3
孫1
孫2
子1
子2
子3
孫1
孫2
子1
子2
子3
孫1
孫2
子1
子2
子3
孫1
孫2
子1
子2
子3
孫1
孫2
子1
子2
子3
孫1
孫2
子1
子2
子3
孫1
孫2
子1
子2
子3
孫1
孫2
子1
子2
子3
孫1
孫2
子1
子2
子3
孫1
孫2
子1
子2
子3
孫1
孫2
子1
子2
子3
孫1
孫2
子1
子2
子3
孫1
孫2
子1
子2
子3
孫1
孫2
子1
子2
子3
孫1
孫2
子1
子2
子3
孫1
孫2
子1
子2
子3
孫1
孫2
子1
子2
子3
孫1
孫2
子1
子2
子3
孫1
孫2
子1
子2
子3
孫1
孫2
子1
子2
子3
孫1
孫2
デフォルト HTML & CSS

このページでは、以下のコードをデフォルトとして使用している。

CSS : デフォルト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; /* 背景色 */
}
HTML : 適用するHTML
<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>
実行結果
子1
子2
子3
孫1
孫2
テンプレート
CSS : テンプレート
.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プロパティ(blockinlineなど)についてはこちらのページを参照

CSSプロパティ設定内容設定する対象
displayflex(縦並び) or inline-flex(横並び)、親要素
flex-flowflex-directionflex-wrap の一括指定親要素
flex-direction向きを指定する。親要素
flex-wrap改行(折り返し)を指定する親要素
order並びの順番を指定する子要素
align-items上下の位置を指定する親要素
align-self上下の位置を個別に指定する子要素
flexflex-growflex-shrinkflex-basis の一括指定子要素
flex-grow子要素の幅の広がり具合を指定する子要素
flex-shrink子要素の幅の縮み具合を指定する子要素
flex-basis子要素のを指定する子要素
justify-content子要素の左右間隔を指定する親要素
align-content行の上下間隔を指定する親要素

(補足) inline-block

横並びにするだけなら「display: inline-block;」を使ってでもできる。

しかし、display: flex;はより細かい設定が可能。

CSS : 横並びにする
.children {
display: inline-block; /* 横並び */
vertical-align: top; /* 上揃え */
}
実行結果
子1
子2
子3
孫1
孫2

display: flex

親要素(.parent)に対してdisplay: flex;を指定する。

子要素(.children)は横並びになる。(理由: flex-directionのデフォルト値がrowだから。)

また、「子1」と「子2」は、「子3の高さ」に合わせる形で引き延ばされている。(理由: align-itemsのデフォルト値がstretchだから。)

CSS : flex
.parent {
display: flex;
width: 15em;
}
実行結果
子1
子2
子3
孫1
孫2

親要素にdisplay: flex;の設定をしないと、以降のプロパティは機能しないことに注意。

inline-flex

display: flex;の替わりに、display: inline-flex;を設定してもフレックス・ボックスになる。

その違いは blockinline-block の違いと同じで、横並びになるだけ。

#縦並び横並び
ボックスblockinline-block
フレックス・ボックスflexinline-flex

このように親要素の並び方の違いなので、以降の説明ではflexだけを使う。

ためしてみる

親要素が2つの場合を考える。display: flex;の場合は縦並び。

CSS : flex
.parent {
display: flex;
width: 15em;
}
HTML : 適用するHTML
<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>
実行結果
子1
子2
子3
孫1
孫2
子1
子2
子3
孫1
孫2

display: inline-flex;に変更すると横並びになる。

CSS : inline-flex
.parent {
display: inline-flex;
width: 15em;
}
実行結果
子1
子2
子3
孫1
孫2
子1
子2
子3
孫1
孫2

flex-flow : 向きと折り返し

flex-direction (向き)とflex-wrap (改行/折り返し)を一括で指定する。
(つまり、 flex-directionflex-wrap を個々に設定してもいいけど、まとめた方が楽だ、ということ。)

flex-direction「左→右」、「右→左」、「上→下」、「下→上」
flex-wrap「改行しない」、「(上→下に)改行する」、「(下→上に)改行する」

設定可能な値は下表。

(表) flex-flowの設定値
設定値機能デフォルト同じ機能の別の書き方
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 : 並びの向き

(表) flex-directionの設定値
設定値機能デフォルト
row横並び(正順):左→右
row-reverse横並び(逆順):右→左
column縦並び(正順) :上→下
column-reverse縦並び(逆順) :下→上

row : 左→右

CSS : row
.parent {
display: flex;
flex-direction: row;
}
実行結果
子1
子2
子3
孫1
孫2
flex-directionを無指定の場合

flex-directionのデフォルト値なので、無指定の場合でも同じ結果。

CSS : row
.parent {
display: flex;
}
実行結果
子1
子2
子3
孫1
孫2

row-reverse : 右→左

CSS : row-reverse
.parent {
display: flex;
flex-direction: row-reverse;
}
実行結果
子1
子2
子3
孫1
孫2

column : 上→下

CSS : column
.parent {
display: flex;
flex-direction: column;
}
実行結果
子1
子2
子3
孫1
孫2
display: flex;を無指定の場合

display: flex;を無指定しても、同じように上→下になる。(ブロック要素のデフォルトだから)

CSS : row
.parent {
}
実行結果
子1
子2
子3
孫1
孫2

column-reverse : 下→上

CSS : column-reverse
.parent {
display: flex;
flex-direction: column-reverse;
}
実行結果
子1
子2
子3
孫1
孫2

flex-wrap : 改行

「改行しない」「改行する」「逆順に改行する」から選択。

(表) flex-wrapの設定値
設定値機能デフォルト
nowrap改行しない。
wrap正順に改行する。
wrap-reverse逆順に改行する。

nowrap : 改行しない

折り返さない。

CSS : nowrap
.parent {
width: 11em;
display: flex;
flex-wrap: nowrap;
}
実行結果
子1
子2
子3
孫1
孫2

※ 折り返しを確認するため、width: 11em;にして幅を(せば)めている。

wrap : 正順に改行する

折り返す。

CSS : wrap
.parent {
width: 11em;
display: flex;
flex-wrap: wrap;
}
実行結果
子1
子2
子3
孫1
孫2
row-reverse :右→左

右→左 /折り返す

CSS : wrap
.parent {
width: 11em;
display: flex;
flex-flow: row-reverse wrap;
}
実行結果
子1
子2
子3
孫1
孫2
column : 上→下

上→下/折り返す(実質的にあまり意味がない)

CSS : wrap
.parent {
width: 11em;
display: flex;
flex-flow: column wrap;
}
実行結果
子1
子2
子3
孫1
孫2
column-reverse : 下→上

下→上/折り返す(実質的にあまり意味がない)

CSS : wrap
.parent {
width: 11em;
display: flex;
flex-flow: column-reverse wrap;
}
実行結果
子1
子2
子3
孫1
孫2

wrap-reverse : 逆順に改行する

折り返す(行は逆順)。

CSS : wrap-reverse
.parent {
width: 11em;
display: flex;
flex-wrap: wrap-reverse;
}
実行結果
子1
子2
子3
孫1
孫2
row-reverse :右→左

右→左/折り返す(行は逆順)。

CSS : wrap
.parent {
width: 11em;
display: flex;
flex-flow: row-reverse wrap-reverse;
}
実行結果
子1
子2
子3
孫1
孫2
column : 上→下

上→下/折り返す(行は逆順)。(実質的にあまり意味がない)

CSS : wrap
.parent {
width: 11em;
display: flex;
flex-flow: column wrap-reverse;
}
実行結果
子1
子2
子3
孫1
孫2
column-reverse : 下→上

下→上/折り返す(行は逆順)。(実質的にあまり意味がない)

CSS : wrap
.parent {
width: 11em;
display: flex;
flex-flow: column-reverse wrap-reverse;
}
実行結果
子1
子2
子3
孫1
孫2

order : 順番

デフォルト値は0である。

とりあえず、「子2(.child-2)」の順番を変えてみる。

子2のorder-1などマイナスの値を設定すると、子2が先頭に来る。(デフォルト値は0だから)

CSS : order: -1;
.parent {
display: flex;
}
.child-2 {
order: -1;
}
実行結果
子1
子2
子3
孫1
孫2

1などプラスの値を設定すると、子2が最後に来る。(「子1」と「子3」はデフォルトの0なので前に来る)

CSS :
.parent {
display: flex;
}
.child-2 {
order: 1;
}
実行結果
子1
子2
子3
孫1
孫2

全部の子要素のorderプロパティを指定すると、分かりやすくなる。

CSS :
.parent {
display: flex;
}
.child-3 { order: 1; }
.child-1 { order: 2; }
.child-2 { order: 3; }
実行結果
子1
子2
子3
孫1
孫2

align-items : 上下位置

親要素に指定する。

(表) align-itemsの設定値
設定値機能デフォルト
stretch上下に延ばす
flex-start上揃え
center中央揃え
flex-end下揃え

※ 子要素を個別に指定したい場合は、子要素にalign-selfプロパティを設定する。

stretch : 引き延ばす

子要素が縦方向に引き延ばされる。

CSS : stretch
.parent {
display: flex;
align-items: stretch;
}
実行結果
子1
子2
子3
孫1
孫2

無指定/normalの場合

stretchがデフォルト値であるので、無指定でも同じ結果。

CSS : 無指定
.parent {
display: flex;
}
実行結果
子1
子2
子3
孫1
孫2

normalでも同じ結果。

CSS : normal
.parent {
display: flex;
align-items: normal;
}
実行結果
子1
子2
子3
孫1
孫2

flex-start : 上揃え

(引き延ばされないで)上揃え

CSS : flex-start
.parent {
display: flex;
align-items: flex-start;
}
実行結果
子1
子2
子3
孫1
孫2

center : 中央揃え

(引き延ばされないで)中央揃え

CSS : center
.parent {
display: flex;
align-items: center;
}
実行結果
子1
子2
子3
孫1
孫2

flex-end : 下揃え

(引き延ばされないで)下揃え

CSS : flex-end
.parent {
display: flex;
align-items: flex-end;
}
実行結果
子1
子2
子3
孫1
孫2

align-self : 上下の個別指定

align-itemsと異なり、子要素に対して設定することに注意。

(表) align-selfの設定値
設定値機能デフォルト
stretch上下に延ばす
flex-start上揃え
center中央揃え
flex-end下揃え

flex-start : 上揃え

全体が中央揃え(center)だが、子1(.child-1)のみ上揃え(flex-start)にした例。

CSS : flex-start
.parent {
display: flex;
align-items: center;
}
.child-1 {
align-self: flex-start;
}
実行結果
子1
子2
子3
孫1
孫2

center : 中央揃え

全体が上揃え(flex-start)だが、子1(.child-1)のみ中央揃え(center)にした例。

CSS : center
.parent {
display: flex;
align-items: flex-start;
}
.child-1 {
align-self: center;
}
実行結果
子1
子2
子3
孫1
孫2

flex-end : 下揃え

全体が中央揃え(center)だが、子1(.child-1)のみ下揃え(flex-end)にした例。

CSS : flex-end
.parent {
display: flex;
align-items: center;
}
.child-1 {
align-self: flex-end;
}
実行結果
子1
子2
子3
孫1
孫2

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

例。

CSS : flex
.parent {
display: flex;
}
.children {
flex: 1 1 auto;
}
実行結果
子1
子2
子3
孫1
孫2

flex-grow : 広がり具合

全ての子要素に1を指定すると、均等に幅が広くなる。

CSS : grow
.parent {
display: flex;
}
.children {
flex-grow: 1;
}
実行結果
子1
子2
子3
孫1
孫2

子1(.child-1)のflex-grow2に変更する。子1の増加分が多い。

CSS : grow
.parent {
display: flex;
}
.children {
flex-grow: 1;
}
.child-1 {
flex-grow: 2;
}
実行結果
子1
子2
子3
孫1
孫2

3に変更する。子1の増加分が更に多くなる。

CSS : grow
.parent {
display: flex;
}
.children {
flex-grow: 1;
}
.child-1 {
flex-grow: 3;
}
実行結果
子1
子2
子3
孫1
孫2

子3(.child-3)のflex-grow2に変更する。子1→子3→子2の順に幅が広くなる。

CSS : grow
.parent {
display: flex;
}
.children {
flex-grow: 1;
}
.child-1 {
flex-grow: 3;
}
.child-3 {
flex-grow: 2;
}
実行結果
子1
子2
子3
孫1
孫2

デフォルトは0

0を指定すると、元の幅に戻る。

CSS : grow
.parent {
display: flex;
}
.children {
flex-grow: 0;
}
実行結果
子1
子2
子3
孫1
孫2

これはデフォルト値なので無指定の時と同じ。

flex-shrink : 縮み具合

子要素の幅を、親要素(幅:30em)からはみ出るくらい広くしてみる。

一定の比率で縮まって、親要素に収まっている。

CSS : shrink
.parent {
display: flex;
}
.children {
width: 15em;
}
実行結果
子1
子2
子3
孫1
孫2

これは、flex-shrinkのデフォルト値が1であるため。

CSS : shrink
.parent {
display: flex;
}
.children {
width: 15em;
flex-shrink: 1;
}
実行結果
子1
子2
子3
孫1
孫2

子1(child-1)のflex-shrink2にすると、子1のみが更に縮まる。

CSS : shrink
.parent {
display: flex;
}
.children {
width: 15em;
flex-shrink: 1;
}
.child-1 {
flex-shrink: 2;
}
実行結果
子1
子2
子3
孫1
孫2

3にすると、子1は更に縮まる。

CSS : shrink
.parent {
display: flex;
}
.children {
width: 15em;
flex-shrink: 1;
}
.child-1 {
flex-shrink: 3;
}
実行結果
子1
子2
子3
孫1
孫2

子3(child-3)のflex-shrink2にすると、子1→子3→子2の順に狭くなる。

CSS : shrink
.parent {
display: flex;
}
.children {
width: 15em;
flex-shrink: 1;
}
.child-1 {
flex-shrink: 3;
}
.child-3 {
flex-shrink: 2;
}
実行結果
子1
子2
子3
孫1
孫2

0にすると、縮まらない。

0を指定すると、親要素に収まらないではみ出る。

CSS : shrink
.parent {
display: flex;
}
.children {
width: 15em;
flex-shrink: 0;
}
実行結果
子1
子2
子3
孫1
孫2

flex-basis : 幅

実質的にwidthプロパティと同じである。異なる点は以下。

  • display: flex;要素の子要素でしか使えない。
  • widthプロパティとflex-basisプロパティの両方が指定された場合、flex-basisが優先される。

幅を15emにしてみる。

CSS : basis
.parent {
display: flex;
}
.children {
flex-basis: 15em;
}
実行結果
子1
子2
子3
孫1
孫2

幅を3emにしてみる。

CSS : basis
.parent {
display: flex;
}
.children {
flex-basis: 3em;
}
実行結果
子1
子2
子3
孫1
孫2

flex-grow: 1;を指定すると、横幅が広まる。

CSS : basis
.parent {
display: flex;
}
.children {
flex-basis: 3em;
flex-grow: 1;
}
実行結果
子1
子2
子3
孫1
孫2

justify-content : 左右間隔

(表) justify-contentの設定値
設定値機能デフォルト
flex-start左寄せ
center中央揃え
flex-end右寄せ
space-between均等配置(左右は詰める)
space-around均等配置(左右も開ける)

flex-start : 左寄せ

CSS : justify-content: flex-start
.parent {
display: flex;
justify-content: flex-start;
}
実行結果
子1
子2
子3
孫1
孫2

center : 中央揃え

CSS : justify-content: center
.parent {
display: flex;
justify-content: center;
}
実行結果
子1
子2
子3
孫1
孫2

flex-end : 右寄せ

CSS : justify-content: flex-end
.parent {
display: flex;
justify-content: flex-end;
}
実行結果
子1
子2
子3
孫1
孫2

space-between : 均等配置(左右は詰める)

CSS : justify-content: space-between
.parent {
display: flex;
justify-content: space-between;
}
実行結果
子1
子2
子3
孫1
孫2

space-around : 均等配置(左右も開ける)

CSS : justify-content: space-around
.parent {
display: flex;
justify-content: space-around;
}
実行結果
子1
子2
子3
孫1
孫2

align-content : 行間

この設定は折り返しによる行間を指定するので、flex-wrapwraporwrap-reverse以外の場合(つまり、nowrapの場合)、機能しない。

(表) justify-contentの設定値
設定値機能デフォルト
stretch上下に引き延ばす
flex-start上寄せ
center中央揃え
flex-end下寄せ
space-between均等配置(上下は詰める)
space-around均等配置(上下も開ける)

stretch : 上下に引き延ばす

CSS : stretch
.parent {
height: 30em;
width: 11em;
display: flex;
flex-wrap: wrap;
align-content: stretch;
}
実行結果
子1
子2
子3
孫1
孫2

flex-start : 上寄せ

CSS : flex-start
.parent {
height: 30em;
width: 11em;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
実行結果
子1
子2
子3
孫1
孫2

center : 中央揃え

CSS : center
.parent {
height: 30em;
width: 11em;
display: flex;
flex-wrap: wrap;
align-content: center;
}
実行結果
子1
子2
子3
孫1
孫2

flex-end : 下寄せ

CSS : flex-end
.parent {
height: 30em;
width: 11em;
display: flex;
flex-wrap: wrap;
align-content: flex-end;
}
実行結果
子1
子2
子3
孫1
孫2

space-between : 均等配置(上下は詰める)

CSS : space-between
.parent {
height: 30em;
width: 11em;
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
実行結果
子1
子2
子3
孫1
孫2

space-around : 均等配置(上下も開ける)

CSS : space-around
.parent {
height: 30em;
width: 11em;
display: flex;
flex-wrap: wrap;
align-content: space-around;
}
実行結果
子1
子2
子3
孫1
孫2

Emmet : df

記述Visual Studio Code
dfdisplay: flex;
fxfflex-flow: ;
fxdflex-direction: row;
fxwflex-wrap: nowrap;
ordorder: ;
aialign-items: flex-start;
asalign-self: auto;
fxflex: ;
fxgflex-grow: ;
fxsflex-shrink: ;
fxbflex-basis: fill;
jcjustify-content: flex-start;
acalign-content: flex-start;