display: flex : フレックス・ボックス・レイアウト - CSSプロパティ - Web開発

概要へ移動

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

display: flex

子1

子2

孫

子3

孫１

孫２

row-reverse

子1

子2

孫

子3

孫１

孫２

column-reverse

子1

子2

孫

子3

孫１

孫２

wrap

子1

子2

孫

子3

孫１

孫２

wrap-reverse

子1

子2

孫

子3

孫１

孫２

order

子1

子2

孫

子3

孫１

孫２

align-items: flex-start

子1

子2

孫

子3

孫１

孫２

align-items: center

子1

子2

孫

子3

孫１

孫２

align-items: flex-end

子1

子2

孫

子3

孫１

孫２

align-self

子1

子2

孫

子3

孫１

孫２

flex

子1

子2

孫

子3

孫１

孫２

flex-grow

子1

子2

孫

子3

孫１

孫２

justify-content: center

子1

子2

孫

子3

孫１

孫２

justify-content: flex-end

子1

子2

孫

子3

孫１

孫２

justify-content: space-between

子1

子2

孫

子3

孫１

孫２

justify-content: space-around

子1

子2

孫

子3

孫１

孫２

stretch

子1

子2

孫

子3

孫１

孫２

flex-start

子1

子2

孫

子3

孫１

孫２

center

子1

子2

孫

子3

孫１

孫２

flex-end

子1

子2

孫

子3

孫１

孫２

space-between

子1

子2

孫

子3

孫１

孫２

space-around

子1

子2

孫

子3

孫１

孫２

デフォルト 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">孫１</div>
        <div class="g-children">孫２</div>
    </div>
</div>

実行結果

子1

子2

孫

子3

孫１

孫２

テンプレート

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プロパティ(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;はより細かい設定が可能。

CSS : 横並びにする


.children {
    display:            inline-block;   /*  横並び */
    vertical-align:     top;            /*  上揃え */
}

実行結果

子1

子2

孫

子3

孫１

孫２

`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

孫１

孫２

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

`inline-flex`

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

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

#	縦並び	横並び
ボックス	`block`	`inline-block`
フレックス・ボックス	`flex`	`inline-flex`

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

ためしてみる

親要素が２つの場合を考える。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">孫１</div>
        <div class="g-children">孫２</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">孫１</div>
        <div class="g-children">孫２</div>
    </div>
</div>

実行結果

子1

子2

孫

子3

孫１

孫２

子1

子2

孫

子3

孫１

孫２

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

CSS : inline-flex


.parent  {
    display:    inline-flex;
    width:      15em;
}

実行結果

子1

子2

孫

子3

孫１

孫２

子1

子2

孫

子3

孫１

孫２

`flex-flow` : 向きと折り返し

flex-direction （向き）とflex-wrap （改行／折り返し）を一括で指定する。
（つまり、 flex-direction とflex-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

孫１

孫２

`flex-direction`を無指定の場合

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

CSS : row


.parent  {
    display:        flex;
                            
}

実行結果

子1

子2

孫

子3

孫１

孫２

`row-reverse` : 右→左

CSS : row-reverse


.parent  {
    display:        flex;
    flex-direction: row-reverse;
}

実行結果

子1

子2

孫

子3

孫１

孫２

`column` : 上→下

CSS : column


.parent  {
    display:        flex;
    flex-direction: column;
}

実行結果

子1

子2

孫

子3

孫１

孫２

`display: flex;`を無指定の場合

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

CSS : row

実行結果

子1

子2

孫

子3

孫１

孫２

`column-reverse` : 下→上

CSS : column-reverse


.parent  {
    display:        flex;
    flex-direction: column-reverse;
}

実行結果

子1

子2

孫

子3

孫１

孫２

`flex-wrap` : 改行

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

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

`nowrap` : 改行しない

折り返さない。

CSS : nowrap


.parent  {
    width:      11em;
    display:    flex;
    flex-wrap:  nowrap;
}

実行結果

子1

子2

孫

子3

孫１

孫２

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

`wrap` : 正順に改行する

折り返す。

CSS : wrap


.parent  {
    width:      11em;
    display:    flex;
    flex-wrap:  wrap;
}

実行結果

子1

子2

孫

子3

孫１

孫２

`row-reverse` :右→左

右→左／折り返す

CSS : wrap


.parent  {
    width:      11em;
    display:    flex;
    flex-flow:  row-reverse wrap;
}

実行結果

子1

子2

孫

子3

孫１

孫２

`column` : 上→下

上→下／折り返す（実質的にあまり意味がない）

CSS : wrap


.parent  {
    width:      11em;
    display:    flex;
    flex-flow:  column wrap;
}

実行結果

子1

子2

孫

子3

孫１

孫２

`column-reverse` : 下→上

下→上／折り返す（実質的にあまり意味がない）

CSS : wrap


.parent  {
    width:      11em;
    display:    flex;
    flex-flow:  column-reverse wrap;
}

実行結果

子1

子2

孫

子3

孫１

孫２

`wrap-reverse` : 逆順に改行する

折り返す（行は逆順）。

CSS : wrap-reverse


.parent  {
    width:      11em;
    display:    flex;
    flex-wrap:  wrap-reverse;
}

実行結果

子1

子2

孫

子3

孫１

孫２

`row-reverse` :右→左

右→左／折り返す（行は逆順）。

CSS : wrap


.parent  {
    width:      11em;
    display:    flex;
    flex-flow:  row-reverse wrap-reverse;
}

実行結果

子1

子2

孫

子3

孫１

孫２

`column` : 上→下

上→下／折り返す（行は逆順）。（実質的にあまり意味がない）

CSS : wrap


.parent  {
    width:      11em;
    display:    flex;
    flex-flow:  column wrap-reverse;
}

実行結果

子1

子2

孫

子3

孫１

孫２

`column-reverse` : 下→上

下→上／折り返す（行は逆順）。（実質的にあまり意味がない）

CSS : wrap


.parent  {
    width:      11em;
    display:    flex;
    flex-flow:  column-reverse wrap-reverse;
}

実行結果

子1

子2

孫

子3

孫１

孫２

`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」と「子3」はデフォルトの0なので前に来る）

CSS :


.parent  {
    display: flex;
}

.child-2 {
    order:   1;
}

実行結果

子1

子2

孫

子3

孫１

孫２

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

CSS :


.parent  {
    display: flex;
}

.child-3 { order: 1; }
.child-1 { order: 2; }
.child-2 { order: 3; }

実行結果

子1

子2

孫

子3

孫１

孫２

`align-items` : 上下位置

親要素に指定する。

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

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

`stretch` : 引き延ばす

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

CSS : stretch


.parent  {
    display:      flex;
    align-items:  stretch;
}

実行結果

子1

子2

孫

子3

孫１

孫２

無指定／`normal`の場合

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

CSS : 無指定


.parent  {
    display:        flex;
                        
}

実行結果

子1

子2

孫

子3

孫１

孫２

normalでも同じ結果。

CSS : normal


.parent  {
    display:      flex;
    align-items:  normal;
}

実行結果

子1

子2

孫

子3

孫１

孫２

`flex-start` : 上揃え

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

CSS : flex-start


.parent  {
    display:      flex;
    align-items:  flex-start;
}

実行結果

子1

子2

孫

子3

孫１

孫２

`center` : 中央揃え

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

CSS : center


.parent  {
    display:      flex;
    align-items:  center;
}

実行結果

子1

子2

孫

子3

孫１

孫２

`flex-end` : 下揃え

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

CSS : flex-end


.parent  {
    display:      flex;
    align-items:  flex-end;
}

実行結果

子1

子2

孫

子3

孫１

孫２

`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

孫１

孫２

`center` : 中央揃え

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

CSS : center


.parent  {
    display:      flex;
    align-items:  flex-start;
}

.child-1 {
    align-self:   center;
}

実行結果

子1

子2

孫

子3

孫１

孫２

`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

孫１

孫２

`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

孫１

孫２

`flex-grow` : 広がり具合

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

CSS : grow


.parent  {
    display:   flex;
}

.children {
    flex-grow: 1;
}

実行結果

子1

子2

孫

子3

孫１

孫２

子1（.child-1）のflex-growを2に変更する。子1の増加分が多い。

CSS : grow


.parent  {
    display:   flex;
}

.children {
    flex-grow: 1;
}

.child-1 {
    flex-grow: 2;
}

実行結果

子1

子2

孫

子3

孫１

孫２

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

CSS : grow


.parent  {
    display:   flex;
}

.children {
    flex-grow: 1;
}

.child-1 {
    flex-grow: 3;
}

実行結果

子1

子2

孫

子3

孫１

孫２

子3（.child-3）のflex-growを2に変更する。子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

孫１

孫２

デフォルトは`0`

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

CSS : grow


.parent  {
    display:   flex;
}

.children {
    flex-grow: 0;
}

実行結果

子1

子2

孫

子3

孫１

孫２

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

`flex-shrink` : 縮み具合

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

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

CSS : shrink


.parent  {
    display:   flex;
}

.children {
    width:     15em;
}

実行結果

子1

子2

孫

子3

孫１

孫２

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

CSS : shrink


.parent  {
    display:     flex;
}

.children {
    width:       15em;
    flex-shrink: 1;
}

実行結果

子1

子2

孫

子3

孫１

孫２

子1（child-1）のflex-shrinkを2にすると、子1のみが更に縮まる。

CSS : shrink


.parent  {
    display:   flex;
}

.children {
    width:      15em;
    flex-shrink: 1;
}

.child-1 {
    flex-shrink: 2;
}

実行結果

子1

子2

孫

子3

孫１

孫２

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

CSS : shrink


.parent  {
    display:   flex;
}

.children {
    width:      15em;
    flex-shrink: 1;
}

.child-1 {
    flex-shrink: 3;
}

実行結果

子1

子2

孫

子3

孫１

孫２

子3（child-3）のflex-shrinkを2にすると、子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

孫１

孫２

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

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

CSS : shrink


.parent  {
    display:   flex;
}

.children {
    width:      15em;
    flex-shrink: 0;
}

実行結果

子1

子2

孫

子3

孫１

孫２

`flex-basis` : 幅

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

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

幅を15emにしてみる。

CSS : basis


.parent  {
    display:   flex;
}

.children {
    flex-basis:      15em;
}

実行結果

子1

子2

孫

子3

孫１

孫２

幅を3emにしてみる。

CSS : basis


.parent  {
    display:   flex;
}

.children {
    flex-basis:      3em;
}

実行結果

子1

子2

孫

子3

孫１

孫２

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

CSS : basis


.parent  {
    display:   flex;
}

.children {
    flex-basis:     3em;
    flex-grow:      1;
}

実行結果

子1

子2

孫

子3

孫１

孫２

`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

孫１

孫２

`center` : 中央揃え

CSS : justify-content: center


.parent  {
    display:         flex;
    justify-content: center;
}

実行結果

子1

子2

孫

子3

孫１

孫２

`flex-end` : 右寄せ

CSS : justify-content: flex-end


.parent  {
    display:         flex;
    justify-content: flex-end;
}

実行結果

子1

子2

孫

子3

孫１

孫２

`space-between` : 均等配置（左右は詰める）

CSS : justify-content: space-between


.parent  {
    display:         flex;
    justify-content: space-between;
}

実行結果

子1

子2

孫

子3

孫１

孫２

`space-around` : 均等配置（左右も開ける）

CSS : justify-content: space-around


.parent  {
    display:         flex;
    justify-content: space-around;
}

実行結果

子1

子2

孫

子3

孫１

孫２

`align-content` : 行間

この設定は折り返しによる行間を指定するので、flex-wrapがwraporwrap-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

孫１

孫２

`flex-start` : 上寄せ

CSS : flex-start


.parent  {
    height:         30em;
    width:          11em;
    display:        flex;
    flex-wrap:      wrap;
    align-content:  flex-start;
}

実行結果

子1

子2

孫

子3

孫１

孫２

`center` : 中央揃え

CSS : center


.parent  {
    height:         30em;
    width:          11em;
    display:        flex;
    flex-wrap:      wrap;
    align-content:  center;
}

実行結果

子1

子2

孫

子3

孫１

孫２

`flex-end` : 下寄せ

CSS : flex-end


.parent  {
    height:         30em;
    width:          11em;
    display:        flex;
    flex-wrap:      wrap;
    align-content:  flex-end;
}

実行結果

子1

子2

孫

子3

孫１

孫２

`space-between` : 均等配置（上下は詰める）

CSS : space-between


.parent  {
    height:         30em;
    width:          11em;
    display:        flex;
    flex-wrap:      wrap;
    align-content:  space-between;
}

実行結果

子1

子2

孫

子3

孫１

孫２

`space-around` : 均等配置（上下も開ける）

CSS : space-around


.parent  {
    height:         30em;
    width:          11em;
    display:        flex;
    flex-wrap:      wrap;
    align-content:  space-around;
}

実行結果

子1

子2

孫

子3

孫１

孫２

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;`

リンク

MDN（日本語） > CSS > CSS_Flexible_Box_Layout

概要

（補足） inline-block

display: flex

inline-flex

ためしてみる

flex-flow : 向きと折り返し

flex-direction : 並びの向き

row : 左→右

flex-directionを無指定の場合

row-reverse : 右→左

column : 上→下

display: flex;を無指定の場合

column-reverse : 下→上

flex-wrap : 改行

nowrap : 改行しない

wrap : 正順に改行する

row-reverse :右→左

column : 上→下

column-reverse : 下→上

wrap-reverse : 逆順に改行する

row-reverse :右→左

column : 上→下

column-reverse : 下→上

order : 順番

align-items : 上下位置

stretch : 引き延ばす

無指定／normalの場合

flex-start : 上揃え

center : 中央揃え

flex-end : 下揃え

align-self : 上下の個別指定

flex-start : 上揃え

center : 中央揃え

flex-end : 下揃え

flex : 幅の一括指定

flex-grow : 広がり具合

デフォルトは0

flex-shrink : 縮み具合

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

flex-basis : 幅

justify-content : 左右間隔

flex-start : 左寄せ

center : 中央揃え

flex-end : 右寄せ

space-between : 均等配置（左右は詰める）

space-around : 均等配置（左右も開ける）

align-content : 行間

stretch : 上下に引き延ばす

flex-start : 上寄せ

center : 中央揃え

flex-end : 下寄せ

space-between : 均等配置（上下は詰める）

space-around : 均等配置（上下も開ける）

Emmet : df

リンク

（補足） `inline-block`

`display: flex`

`inline-flex`

`flex-flow` : 向きと折り返し

`flex-direction` : 並びの向き

`row` : 左→右

`flex-direction`を無指定の場合

`row-reverse` : 右→左

`column` : 上→下

`display: flex;`を無指定の場合

`column-reverse` : 下→上

`flex-wrap` : 改行

`nowrap` : 改行しない

`wrap` : 正順に改行する

`row-reverse` :右→左

`column` : 上→下

`column-reverse` : 下→上

`wrap-reverse` : 逆順に改行する

`row-reverse` :右→左

`column` : 上→下

`column-reverse` : 下→上

`order` : 順番

`align-items` : 上下位置

`stretch` : 引き延ばす

無指定／`normal`の場合

`flex-start` : 上揃え

`center` : 中央揃え

`flex-end` : 下揃え

`align-self` : 上下の個別指定

`flex-start` : 上揃え

`center` : 中央揃え

`flex-end` : 下揃え

`flex` : 幅の一括指定

`flex-grow` : 広がり具合

デフォルトは`0`

`flex-shrink` : 縮み具合

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

`flex-basis` : 幅

`justify-content` : 左右間隔

`flex-start` : 左寄せ

`center` : 中央揃え

`flex-end` : 右寄せ

`space-between` : 均等配置（左右は詰める）

`space-around` : 均等配置（左右も開ける）

`align-content` : 行間

`stretch` : 上下に引き延ばす

`flex-start` : 上寄せ

`center` : 中央揃え

`flex-end` : 下寄せ

`space-between` : 均等配置（上下は詰める）

`space-around` : 均等配置（上下も開ける）

Emmet : `df`