CSS | display: flex | フレックス・ボックス

フレックス・ボックス(display: flex)を使うと、詳細な配置を設定をできます。

display: flexは、下表のCSSプロパティと共に使います。

`display: flex`と共に使うCSSプロパティ一覧
CSSプロパティ	設定内容	デフォルト値	よく使う設定値	設定する対象
`flex-wrap`	改行を指定する	`nowrap`	`wrap`	親要素
`flex-direction`	向きを指定する	`row`		親要素
`flex-flow`	改行と向きを一括で指定する	`nowrap row`	`wrap`	親要素
`justify-content`	左右整列	`flex-start`		親要素
`align-items`	上下整列(親要素)	`stretch`		親要素
`align-content`	改行時の上下整列	`stretch`		親要素
`align-self`	上下整列(子要素)	`stretch`		子要素
`flex-grow`	幅の広がりを指定する	`0`	`1`	子要素
`flex-shrink`	幅の縮みを指定する	`1`		子要素
`flex-basis`	幅の大きさを指定する	`auto`		子要素
`flex`	`flex-grow`、`flex-shrink`、 `flex-basis` の一括指定	`0 1 auto`		子要素
`order`	順番を指定する	`0`		子要素

これらのCSSプロパティは親要素に対して設定するプロパティと、子要素に対して設定するプロパティがあるので注意しましょう。

`display: flex`

親子関係のある要素を準備します。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

実行結果初期状態

parent

子1

子2

子3

子4

display: flexは親要素(.parent)に対して設定します。子要素は横並びになります。 (理由: 後述するflex-directionのデフォルト値がrowだからです)

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
}

実行結果display: flex

parent

子1

子2

子3

子4

デフォルト値

display: flexは他のCSSプロパティと共に設定します。以下にそれらのデフォルト値が設定してみました。全てがデフォルト値なので表示結果は無指定の場合と同じになります。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
  display:         flex;
  flex-wrap:       nowrap;     /* 改行 */
  flex-direction:  row;        /* 向き */
  justify-content: flex-start; /* 左右整列 */
  align-items:     stretch;    /* 上下整列(親要素) */
  align-content:   stretch;    /* 改行時の上下整列 */
}

.children {
  align-self:  stretch;        /* 上下整列(子要素) */
  flex-grow:   0;              /* 幅の広がり */
  flex-shrink: 1;              /* 幅の縮み */
  flex-basis:  auto;           /* 幅の大きさ */
  order:       0;              /* 順番 */
}

実行結果デフォルト値(1)

parent

子1

子2

子3

子4

いくつかのCSSプロパティはまとめることができます。まとめた例を以下に示します。align-items

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
  display:         flex;
  flex-flow:       nowrap row; /* 改行 ＋ 向き */
  justify-content: flex-start; /* 左右整列 */
  align-items:     stretch;    /* 上下整列(親要素) */
  align-content:   stretch;    /* 改行時の上下整列*/
}

.children {
  align-self:  stretch;        /* 上下整列(子要素) */
  flex:        0 1 auto;       /* 幅の広がり＋縮み＋大きさ */
  order:       0;              /* 順番 */
}

実行結果デフォルト値(2)

parent

子1

子2

子3

子4

`flex-wrap` | 改行

flex-wrapで改行を指定します。

`flex-wrap`の設定値
設定値	機能	メモ
`wrap`	下に改行する。	よく使う
`wrap-reverse`	上に改行する。
`nowrap`	改行しない。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
}

実行結果初期状態

parent

子1

子2

子3

子4

親要素の幅(width)を狭く(10rem)します。デフォルトでは子要素は親要素をはみ出します。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
    width:   10rem;
}

実行結果はみ出す

parent

子1

子2

子3

子4

親要素のflex-wrapをwrapに設定すると子要素は下に改行します。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display:   flex;
    width:     10rem;
    flex-wrap: wrap;
}

実行結果wrap

parent

子1

子2

子3

子4

wrap-reverseにすると上に改行します。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display:   flex;
    width:     10rem;
    flex-wrap: wrap-reverse;
}

実行結果wrap-reverse

parent

子1

子2

子3

子4

nowrapにすると改行しません。(デフォルト値)

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display:   flex;
    width:     10rem;
    flex-wrap: nowrap;
}

実行結果nowrap

parent

子1

子2

子3

子4

改行しない場合ははみ出すことがあります。はみ出した部分の表示についてはoverflowプロパティを使います。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display:  flex;
    width:    10rem;
    overflow: auto;
}

実行結果overflow: auto

parent

子1

子2

子3

子4

`flex-direction` | 向き

flex-directionで並びの向きを指定します。

`flex-direction`の設定値
設定値	並び	デフォルト	メモ
`row`	左→右
`row-reverse`	右→左
`column`	上→下
`column-reverse`	下→上

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
}

実行結果初期状態

parent

子1

子2

子3

子4

親要素のflex-directionをrow-reverseに設定すると右→左になります。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


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

実行結果row-reverse

parent

子1

子2

子3

子4

columnに変更すると上→下になります。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


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

実行結果column

parent

子1

子2

子3

子4

column-reverseに変更すると下→上になります。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


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

実行結果column-reverse

parent

子1

子2

子3

子4

rowに変更すると左→右になります。(デフォルト値)

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


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

実行結果row

parent

子1

子2

子3

子4

個々の子要素の並び順を細かく指定するにはorderプロパティを使います。

`flex-flow` | 改行＋向き

flex-flowはflex-wrap(改行)とflex-direction(向き)をまとめて指定するプロパティです。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
    width:   10rem;
}

実行結果初期状態

parent

子1

子2

子3

子4

flex-wrapとflex-directionを個別に指定した場合と、flex-flowでまとめて指定した場合の結果を示します。表示結果は同じです。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display:        flex;
    width:          10rem;
    flex-wrap:      wrap;
    flex-direction: row-reverse;
}

実行結果個別

parent

子1

子2

子3

子4

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display:   flex;
    width:     10rem;
    flex-flow: wrap row-reverse;
}

実行結果まとめて

parent

子1

子2

子3

子4

flex-flowの設定値を一つだけにすることもできます。 flex-wrap: wrapとflex-flow: wrapは同じ結果になります。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display:   flex;
    width:     10rem;
    flex-wrap: wrap;
}

実行結果flex-wrap

parent

子1

子2

子3

子4

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display:   flex;
    width:     10rem;
    flex-flow: wrap;
}

実行結果flex-flow

parent

子1

子2

子3

子4

`justify-content` | 左右整列

justify-contentは左右をそろえる設定です。

`justify-content`の設定値
設定値	機能	デフォルト	メモ
`flex-start`	左に整列
`center`	中央に整列
`flex-end`	右に整列
`space-between`	均等配置(端は詰める)
`space-around`	均等配置(端は開ける)

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
}

実行結果初期状態

parent

子1

子2

子3

子4

親要素の幅(width)を広げます。左に整列されます。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
    width:   30rem;
}

実行結果広げる

parent

子1

子2

子3

子4

親要素のjustify-contentをcenterを指定します。中央に整列されます。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


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

実行結果center

parent

子1

子2

子3

子4

flex-endを指定します。右に整列されます。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


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

実行結果flex-end

parent

子1

子2

子3

子4

space-betweenを指定します。均等に配置されます。端(はし)は詰(つ)めて表示されます。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


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

実行結果space-between

parent

子1

子2

子3

子4

space-aroundを指定します。均等に配置されます。(space-betweenとは異なり)端を空けて表示されます。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


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

実行結果space-around

parent

子1

子2

子3

子4

flex-startを指定します。左に整列されます。(デフォルト値)

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display:         flex;
    width:           30rem;
    justify-content: flex-start;
}

実行結果flex-start

parent

子1

子2

子3

子4

`align-items` | 上下整列(親要素)

align-itemsは上下をそろえる設定です。

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

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
}

実行結果初期状態

parent

子1

子2

子3

子4

親要素の高さ(height)を広げます。上下に延ばされます。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
    height:  12rem;
}

実行結果広げる

parent

子1

子2

子3

子4

align-itemsにflex-startを指定すると上そろえになります。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


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

実行結果flex-start

parent

子1

子2

子3

子4

align-itemsにcenterを指定すると中央そろえになります。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


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

実行結果center

parent

子1

子2

子3

子4

align-itemsにflex-endを指定すると下そろえになります。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


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

実行結果flex-end

parent

子1

子2

子3

子4

align-itemsにstretchを指定すると上下に延ばします。(デフォルト値)

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


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

実行結果stretch

parent

子1

子2

子3

子4

`align-content` | 改行時の上下整列

align-contentは改行時の上下をそろえる設定です。改行時に対する設定なのでflex-wrap(改行)がnowrap(改行しない)の場合は無効です。

`align-content`の設定値
設定値	機能	デフォルト
`stretch`	上下に引き延ばす
`flex-start`	上に整列
`center`	中央に整列
`flex-end`	下に整列
`space-between`	均等配置(上下の端は詰める)
`space-around`	均等配置(上下の端は開ける)

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display:   flex;
    width:     10rem;
    flex-wrap: wrap;
}

実行結果初期状態

parent

子1

子2

子3

子4

親要素の高さ(height)を高くします。子要素が上下に引き伸ばされます。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display:   flex;
    width:     10rem;
    flex-wrap: wrap;
    height:    18rem;
}

実行結果高く

parent

子1

子2

子3

子4

align-contentにflex-startを指定すると上に整列になります。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display:       flex;
    width:         10rem;
    flex-wrap:     wrap;
    height:        18rem;
    align-content: flex-start;
}

実行結果flex-start

parent

子1

子2

子3

子4

centerを指定すると中央に整列になります。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display:       flex;
    width:         10rem;
    flex-wrap:     wrap;
    height:        18rem;
    align-content: center;
}

実行結果center

parent

子1

子2

子3

子4

flex-endを指定すると下に整列になります。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display:       flex;
    width:         10rem;
    flex-wrap:     wrap;
    height:        18rem;
    align-content: flex-end;
}

実行結果flex-end

parent

子1

子2

子3

子4

space-betweenを指定すると均等配置(上下の端は詰める)になります。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display:       flex;
    width:         10rem;
    flex-wrap:     wrap;
    height:        18rem;
    align-content: space-between;
}

実行結果space-between

parent

子1

子2

子3

子4

space-aroundを指定すると均等配置(上下の端は開ける)になります。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display:       flex;
    width:         10rem;
    flex-wrap:     wrap;
    height:        18rem;
    align-content: space-around;
}

実行結果space-around

parent

子1

子2

子3

子4

stretchを指定すると上下に引き延ばします。(デフォルト値)

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display:       flex;
    width:         10rem;
    flex-wrap:     wrap;
    height:        18rem;
    align-content: stretch;
}

実行結果stretch

parent

子1

子2

子3

子4

`align-self` | 上下整列(子要素)

align-itemsプロパティは親要素に対して設定し、全ての子要素に同じ設定が適用されます。しかし、個々の子要素で別の設定をしたい場合もあります。その場合、対象の子要素にalign-selfプロパティを設定します。

align-selfが設定可能な値はalign-itemsと同じです。

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

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
}

実行結果初期状態

parent

子1

子2

子3

子4

親要素の高さ(height)を広げます。上下に延ばされます。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
    height:  12rem;
}

実行結果広げる

parent

子1

子2

子3

子4

.child-2だけは上そろえにしたい場合、.child-2クラスのalign-selfをflex-startに設定します。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
    height:  12rem;
}

.child-2 { align-self: flex-start; }

実行結果flex-start

parent

子1

子2

子3

子4

.child-3クラスのalign-selfをcenterに設定すると、中央そろえになります。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
    height:  12rem;
}

.child-2 { align-self: flex-start; }
.child-3 { align-self: center; }

実行結果center

parent

子1

子2

子3

子4

.child-4クラスのalign-selfをflex-endに設定すると、下そろえになります。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
    height:  12rem;
}

.child-2 { align-self: flex-start; }
.child-3 { align-self: center; }
.child-4 { align-self: flex-end; }

実行結果flex-end

parent

子1

子2

子3

子4

.child-4クラスのalign-selfをstretchに変更すると、上下に伸びます。(デフォルト値)

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
    height:  12rem;
}

.child-2 { align-self: flex-start; }
.child-3 { align-self: center; }
.child-4 { align-self: stretch; }

実行結果stretch(デフォルト値)

parent

子1

子2

子3

子4

`flex-grow` | 幅の広がり

幅の広がりを指定します。flex-growは子要素に対して指定することに注意してください。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
}

実行結果初期状態

parent

子1

子2

子3

子4

親要素の幅(width)を広くしてみます。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
    width:   30rem;
}

実行結果広くする

parent

子1

子2

子3

子4

子要素のflex-growを0と指定します。0がデフォルト値なので変化しません。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
    width:   30rem;
}

.children { flex-grow: 0; }

実行結果0

parent

子1

子2

子3

子4

flex-growを1を指定すると子要素が広がります。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
    width:   30rem;
}

.children { flex-grow: 1; }

実行結果flex-grow

parent

子1

子2

子3

子4

.child-3のflex-growを2にすると、他の子要素よりも幅が広くなります。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
    width:   30rem;
}

.children { flex-grow: 1; }

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

実行結果子3のみ2

parent

子1

子2

子3

子4

.child-3のflex-growを3にしてみます。幅はさらに広くなります。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
    width:   30rem;
}

.children { flex-grow: 1; }

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

実行結果子3のみ3

parent

子1

子2

子3

子4

.childrenのflex-growを0にしてみます。.child-3以外の幅はデフォルトに戻るので、開いた全てのスペースを.child-3が占めることになります。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
    width:   30rem;
}

.children { flex-grow: 0; }

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

実行結果.childrenを0に

parent

子1

子2

子3

子4

`flex-shrink` | 幅の縮み

幅の縮みを指定します。flex-shrinkは子要素に対して指定することに注意してください。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
}

実行結果初期状態

parent

子1

子2

子3

子4

親要素の幅(width)を広くしてみます。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
    width:   30rem;
}

実行結果広くする

parent

子1

子2

子3

子4

子要素の幅も広くしてみます。子要素の幅を10remにしているので、全体では10rem × 4 = 40rem必要にですが、親要素の幅が30remしかないのでハミ出しそうです。しかし、子要素が均等に縮むことで上手く収まっています。これは子要素のflex-shrinkのデフォルト値が1であるからです。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
    width:   30rem;
}

.children {
    width: 10rem;
}

実行結果子要素を広く

parent

子1

子2

子3

子4

実際に、子要素のflex-shrinkを1に指定しても結果は同じです。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
    width:   30rem;
}

.children {
    width:       10rem;
    flex-shrink: 1;
}

実行結果1

parent

子1

子2

子3

子4

flex-shrinkを0に変更するとはみ出します。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
    width:   30rem;
}

.children {
    width:       10rem;
    flex-shrink: 0;
}

実行結果0

parent

子1

子2

子3

子4

.childrenを1に戻して、.child-3のflex-shrinkを2にすると、他の子要素よりも狭くなります。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
    width:   30rem;
}

.children {
    width:       10rem;
    flex-shrink: 1;
}

.child-3 { flex-shrink: 2 }

実行結果子3のみ2

parent

子1

子2

子3

子4

.child-3のflex-shrinkを3にすると、さらに狭くなります。このように値が大きいほど狭くなることに注意してください。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
    width:   30rem;
}

.children {
    width:       10rem;
    flex-shrink: 1;
}

.child-3 { flex-shrink: 3 }

実行結果子3のみ2

parent

子1

子2

子3

子4

.child-3のflex-shrinkを0にすると縮まなくなる(＝width: 10rem)ので、他の子要素が縮んで調整します。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
    width:   30rem;
}

.children {
    width:       10rem;
    flex-shrink: 1;
}

.child-3 { flex-shrink: 0 }

実行結果子3のみ0

parent

子1

子2

子3

子4

`flex-basis` | 幅の大きさ

幅の大きさを指定します。flex-basisは子要素に対して指定することに注意してください。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
}

実行結果初期状態

parent

子1

子2

子3

子4

親要素の幅(width)を広くしてみます。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
    width:   30rem;
}

実行結果広くする

parent

子1

子2

子3

子4

子要素のflex-basisを5remにします。 flex-basisは実質的にwidthと同じです。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
    width:   30rem;
}

.children { flex-basis: 5rem; }

実行結果5rem

parent

子1

子2

子3

子4

.child-3のflex-basisを8remにしてみます。子3のみ、幅は広くなります。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
    width:   30rem;
}

.children { flex-basis: 5rem; }

.child-3  { flex-basis: 8rem; }

実行結果子3のみ8rem

parent

子1

子2

子3

子4

flex-basisをwidthと書き換えても同じ結果になります。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
    width:   30rem;
}

.children { width: 5rem; }

実行結果widthでも同じ

parent

子1

子2

子3

子4

flex-basisとwidthの両方を指定した場合、flex-basisが優先されます。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
    width:   30rem;
}

.children {
    width:      5rem;
    flex-basis: 3rem;
}

実行結果flex-basisが優先

parent

子1

子2

子3

子4

`flex` | 幅の広がり＋縮み＋大きさ

flex-grow/flex-shrink/flex-basisを一括で指定します。

設定値の順番はflex( flex-grow, flex-shrink, flex-basis )またはflex( flex-basis, flex-grow, flex-shrink )にします。(つまりflex-shrinkは常にflex-growの後ろ)

設定値	機能	デフォルト
`flex-grow`	幅の広がり	`0`
`flex-shrink`	幅の縮み	`1`
`flex-basis`	幅の大きさ	`auto`

個別に設定した場合。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
    width:   30rem;
}

.children {
    flex-grow:   1;
    flex-shrink: 0;
    flex-basis:  5rem;
}

実行結果flex-grow、flex-shrink、flex-basis

parent

子1

子2

子3

子4

flexでまとめて設定した場合。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
    width:   30rem;
}

.children {
    flex:   1 0 5rem;
}

実行結果flex

parent

子1

子2

子3

子4

`order` | 順番

子要素の順番を指定します。orderは子要素に対して指定することに注意してください。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
}

実行結果初期状態

parent

子1

子2

子3

子4

デフォルト値は0であり、プラスの値を設定すると右に移動します。マイナスの値を設定すると左に移動します。

.child-3のorderを1にすると、子3が一番右に来ます

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
}

.child-3 { order: 1; }

実行結果1

parent

子1

子2

子3

子4

.child-3のorderを-1にすると、子3が一番左に来ます。他の子要素のorderが0なので、一番小さい-1である.child-3が一番左になります。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
}

.child-3 { order: -1; }

実行結果-1

parent

子1

子2

子3

子4

全ての子要素にorderを設定すると小さい順に並びます。(デフォルトが0であることに注意してください)

HTML


parent<br>
<div class="parent">
    <div class="children child-1">子1</div>
    <div class="children child-2">子2</div>
    <div class="children child-3">子3</div>
    <div class="children child-4">子4</div>
</div>

CSS


/* ----- 親要素 ----- */
.parent {
    border:  5px dotted green;
    padding: 5px;
    display: inline-block;
}

/* ----- 子要素 ----- */
.children {
    border:  5px solid purple;
    margin:  5px;
    padding: 5px;
}

CSS


.parent {
    display: flex;
}

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

実行結果order

parent

子1

子2

子3

子4

display: flex

デフォルト値

flex-wrap | 改行

flex-direction | 向き

flex-flow | 改行＋向き

justify-content | 左右整列

align-items | 上下整列(親要素)

align-content | 改行時の上下整列

align-self | 上下整列(子要素)

flex-grow | 幅の広がり

flex-shrink | 幅の縮み

flex-basis | 幅の大きさ

flex | 幅の広がり＋縮み＋大きさ

order | 順番

`display: flex`

`flex-wrap` | 改行

`flex-direction` | 向き

`flex-flow` | 改行＋向き

`justify-content` | 左右整列

`align-items` | 上下整列(親要素)

`align-content` | 改行時の上下整列

`align-self` | 上下整列(子要素)

`flex-grow` | 幅の広がり

`flex-shrink` | 幅の縮み

`flex-basis` | 幅の大きさ

`flex` | 幅の広がり＋縮み＋大きさ

`order` | 順番