flex property quick reference

flex 値の種類

flex プロパティは、とにかく自由であるが故に分かりにくい構文を持つ。このプロパティのデフォルトと「flex: initial;」の関係は、値を省略したときはどうなるのかなど、総当たりで検証を進めて flex プロパティの内容の理解を確定させるのがこのページの狙いである。

flex
構成要素

flex-grow | flex-shrink | flex-basis

キーワード

flex; auto; (flex: 1 1 auto; と同等)
flex: initial; (flex:0 1 auto; と同等)
flex: none; (flex: 0 0 auto; と同等)

初期値

flex-grow: 0;
flex-grow: 1;
flex-grow: auto;

省略した
場合の値

flex 省略→flex: 0 1 auto;
flex: 1→ flex: 1 1 0;
flex: 1 1; → flex: 1 1 0;
flex: 0 1; → flex: 0 1 0;

単位なし数値を 1 つ

flex-grow; の指定
flex: <number> 1 0; と解釈される

幅または高さを 1 つ

flex-basis; の指定

値を 2 つ(1)

flex-grow | flex-shrink
(例)flex: 2 2;

値を 2 つ(2)

flex-grow | flex-basis
(例)flex: 1 30%;

値を 3 つ

flex-grow | flex-shrink | flex-basis
(例)flex: 2 2 10%;

flex: ─;

フレックスコンテナ(display: flex;) の直下にフレックスアイテムを配置する。アイテムに flex プロパティを定義しなくとも以下のような配置を執る。

container

display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: center;

item

(item1:)─
(item2:)─
(item3:)─

There is an exception
to every
rule.

このことは、言い換えれば、アイテムに flex プロパティを省略する場合は、以下のような配置を執るということだ。

container

display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;

item

フレックスアイテムは伸びない/縮む
(item1:)flex: initial; (= flex: 0 1 auto;)
(item2:)flex: initial; (= flex: 0 1 auto;)
(item3:)flex: initial; (= flex: 0 1 auto;)

There is an exception
to every
rule.
flex: 1;

「flex: 1;」は「flex-grow: 1; flex-shrink: 1; flex-basis: 0;」と同じ意味になり、flexプロパティで3つ値を指定する「flex: 1 1 0;」とも同じである。

container

display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: center;

item

(item1:) flex: 1 1 0;
(item2:) flex: 1 1 0;
(item3:) flex: 1 1 0;

There is an exception
to every
rule.

flex のショートハンドを使用して、flex-basis を 0 にする必要がある場合、2つのFlex係数が前にない単位無しの 0 の値は、誤解や無効な宣言を回避するため、ゼロの flex-basis コンポーネントを単位で指定するか、その前に2つのFlex係数を宣言する必要がある。

.item {
  flex: 0%;
  /* flex: 1 1 0;と同じ */
  /* flex: 1;と同じ */
  /* flex-basis: 0;と同じ */
}
flex-basis: 0; は flex: 1; ！？

すべての Flex アイテムは同じサイズになる。

container

display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;

item

(item1:)flex-basis: 0;
(item2:)flex-basis: 0;
(item3:)flex-basis: 0;

There is an exception
to every
rule.

また、この構文は「flex: 1;」と同様になる。

container

display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;

item

(item1:)flex: 1;
(item2:)flex: 1;
(item3:)flex: 1;

There is an exception
to every
rule.
flex-basis: 0; は flex: 0%; と同様

container

display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;

item

(item1:)flex: 0%;
(item2:)flex: 0%;
(item3:)flex: 0%;

Hello good-by
Sure
No, no, nope…
flex: 1 1 0; と flex: 1 1 auto; と flex-wrap:

flex-basisプロパティを 0 に定義すると、すべてのFlexアイテムは同じサイズになる。

container

display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;

item

(item1:)flex: 1 1 0%;
(item2:)flex: 1 1 0%;
(item3:)flex: 1 1 0%;

1111AAAA
2222
3333

flex-basisプロパティを auto に　flex-wrap: wrap; を定義する。

container

display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;

item

(item1:)flex: 1 1 auto;
(item2:)flex: 1 1 auto;
(item3:)flex: 1 1 auto;

Flexアイテムのサイズは、
コンテンツに基づいて
決められている。

flex-basisプロパティを auto に定義すして、flex-wrap: nowrap; を定義する。

container

display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: center;

item

(item1:)flex: 1 1 auto;
(item2:)flex: 1 1 auto;
(item3:)flex: 1 1 auto;

Flexアイテムのサイズは、
コンテンツに基づいて
決められている。
flex-basis: 0; と flex-basis: auto; の違い

flex-basis: 0; を指定した場合

container

display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: center;

item

(item1:)flex-basis: 0%;
(item2:)flex-basis: 0%;
(item3:)flex-basis: 0%;

There is an exception
to every
rule.

flex-basis: auto; を指定した場合

container

display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: center;

item

(item1:)flex-basis: auto;
(item2:)flex-basis: auto;
(item3:)flex-basis: auto;

There is an exception
to every
rule.
flex: 1 1;

2つの単位無しの値がある場合、それぞれflex-growとflex-shrinkである。

container

display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;

item

フレックスアイテムは伸びる/縮む
(item1:)flex: 1 1;
(item2:)flex: 1 1;
(item3:)flex: 1 1;

There is an exception
to every
rule.

単位無しの数値１つの場合、flex: 1 0; と解釈されるので、この流れだと単位無しの数値２つの場合は、flex: 1 1 0; になるのであろうか、やってみた。

container

display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;

item

フレックスアイテムは伸びる/縮む
(item1:)flex: 1 1 0;
(item2:)flex: 1 1 0;
(item3:)flex: 1 1 0;

There is an exception
to every
rule.
flex: 0 1;

2つの単位無しの値がある場合、それぞれflex-growとflex-shrinkである。Flex アイテムが利用可能なスペースを取らないようにするために flex-grow: 0; を定義した場合がこれだ。

container

display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;

item

flex: 0 1 auto; と同じ
(item1:)flex: 0 1;
(item2:)flex: 0 1;
(item3:)flex: 0 1;

There is an exception
to every
rule.

単位無しの数値２つの場合は、flex: <number> <number> 0;である。

container

display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;

item

フレックスアイテムは伸びる/縮む
(item1:)flex: 0 1 0;
(item2:)flex: 0 1 0;;
(item3:)flex: 0 1 0;;

There is an exception
to every
rule.
flex プロパティの値を省略した場合

flex: は flex-grow、flex-shrink、flex-basis の3つのプロパティを一括指定できるショートハンドプロパティである。

更に上の3つのプロパティの値の代わりに以下キーワードが指定可能である。

キーワード

flex: auto;
flex: initial;
flex: none;

このキーワードの中の「flex: initial;」を使うとこうなる。しかし、省略した場合は事象が異なる(次のパネルへ)。

container

display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;

item

フレックスアイテムは伸びない/縮む
(item1:)flex: initial; (= flex: 0 1 auto;)
(item2:)flex: initial; (= flex: 0 1 auto;)
(item3:)flex: initial; (= flex: 0 1 auto;)

There is an exception
to every
rule.
flex の省略と初期値は違う

いずれかの値を省略した際は各プロパティの初期値が適用されると考えていたが、以下の検証で示したように、そうではないようだ。

flex-grow:
flex-shrink:
flex-basis:

0 (初期値)
1 (初期値)
auto (初期値)

flex: initial; を設定した場合、flex: 0 1 auto; と解釈される。

ところで、こういう一文がある。この仕様について当初は釈然としなかった。「flex の各下位プロパティの初期値は、 flex: 0 1 auto と等価になる。 これは、 flex 略式プロパティ内で対応する各成分が省略されたときの既定（実質的に 1 1 0px ）から相違する。」(W3C より引用)

時間を要して、アイテムの flex プロパティを省略すると、flex: initial; (= flex: 0 1 auto;)の値と同等の配置を執ることが分かった。

W3C の一文は、flex: 1; = flex: 1 1 0px;、flex: 1 1; = flex: 1 1 0px;、flex: 0 1; = flex: 0 1 0px; である事象であることから、納得がいくことになる。結論的には、flex プロパティを極力使えということだろう。

flex 略式プロパティ内で対応する flex-basis が省略されたときは(flex-basis: 0%;)の値を持つことが分かった。

There is an exception
to every
rule.

flex の各下位プロパティの初期値(flex-basis: auto;)の場合

There is an exception
to every
rule.
flex: none;

container

display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: center;

item

(item1:)flex: none;
(item2:)flex: none;
(item3:)flex: none;

There is an exception
to every
rule.
flex: auto;

container

display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: center;

item

(item1:)flex: auto;
(item2:)flex: auto;
(item3:)flex: auto;

There is an exception
to every
rule.
flex: 0 0 70%;

(例)幅もしくは高さを固定したい場合

container

display: flex;
flex-wrap: wrap;
flex-direction: row;

item

(item1:)flex: 0 0 24px;
(item2:)flex: 0 0 70%;
(item3:)flex: 0 0 24px;

1
2
3
最後の要素だけ右寄せ

container

display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start;

item

右寄せにしたいアイテムに「margin-left: auto;」を設置する
(item1:)─
(item2:)─
(item3:)margin-left: auto;

111
222
333
カード型レイアウト

タイトル

哲学が何であるかは、誰もすでに何等か知っている。もし全く知らないならば、ひとは哲学を求めることもしないであろう。或る意味においてすべての人間は哲学者である。言い換えると、哲学は現実の中から生れる。そしてそこが哲学の元来の出発点であり、哲学は現実から出立するのである。
button
<style>
.box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: lightblue;
  width: 100%;
  padding: 10px;
}
.box>*:first-child {
    align-self: stretch;
}
.box .selected {
    align-self: flex-end;
    background-color: sandybrown;
    padding: 4px 10px;
}
</style>
<div class="box">
  <div><h2 style="font-size: 16px;">タイトル</h2></div>
	<div>哲学が何であるかは、…である。</div>
	<div class="selected">button</div>
</div>
画像と文字を重ねる(参考)
Jimmy Page
min() / max() / clamp()

min()は二つの値を設定し、どちらか小さい方の値を表示する。

container

display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;

item

(item1:)width: 50%;
(item2:)width: 250px;
(item3:)width: min(50%, 250px);

item1
item2
item3

max()は二つの値を設定し、どちらか大きい方の値を表示する。

container

display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;

item

(item1:)width: 50%;
(item2:)width: 250px;
(item3:)width: min(50%, 250px);

item1
item2
item3

clamp()は定義された 2 つの値 (最小値と最大値)の間に値をクランプする。3 つのパラメータ (最小値、優先値、最大値) を取る。

container

display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;

item

(item1:)width: 100px;
(item2:)width: 300px;
(item2:)width: 50%;
(item4:)width: clamp(100px, 50%, 300px);

item1
item2
item3
item4
ページネーション
flex: 0 0 70px;

(例)画像とテキストを同じ行に配置する

Jean Seberg

A bout de souffle

Jean Seberg,March 16, 1960

<div class="component">
  <img class="component__avatar" src="./images/jean.png" alt="Jean Seberg">
  <div>
    <h3>A bout de souffle</h3>
    <p>Jean Seberg,March 16, 1960</p>
  </div>
</div>
.component {
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* マルチラインにした時の揃え 中央 */
  justify-content: center; /* 水平方向　中央 */
  height: 100px;
  width: 100%;
  border: 1px dashed #333;
  margin-bottom: 16px;
}
.component__avatar {
    flex: 0 0 70px;
    width: 70px;
    height: 70px;
}
flex-flow(並びと単一・複数行を一緒に定義)

flex-flowプロパティは、flex-directionとflex-wrapを設定するショートハンドである。

例えば、flex-flow: row nowrap;(これはデフォルト値である)

画像と figcaption の位置を調節する

(1)画像の上に figcaption を重ねる

A bout de souffle, Release: March 16 1960
actress: Jean Seberg

(2)画像の下辺に figcaption をくっ付ける

A bout de souffle, Release: March 16 1960
actress: Jean Seberg
(1) source
<figure style="position: relative; display: inline-block;	margin-right: 20px;	width: 340px; margin-bottom: 16px;">
  <img src="./images/jean.jpg" style="max-width: 340px; vertical-align: top;">
  <figcaption style="position: absolute; left: 0; bottom: 0; padding: 5px 10px; font-size: 86%; color: #fff; background-color: rgba(51,51,51,0.5); width: 340px;">A bout de souffle, Release: March 16 1960<br>actress: Jean Seberg
  </figcaption>
</figure>
(2) source
<figure style="position: relative; display: inline-block;	margin-right: 20px;	width: 340px;">
  <img src="./images/jean.jpg" style="max-width: 340px; vertical-align: top;">
  <figcaption style="display: table; width: 340px; padding: 5px 10px; font-size: 86%; color: #fff; background-color: rgba(51,51,51,.5);">A bout de souffle, Release: March 16 1960<br>actress: Jean Seberg
  </figcaption>
</figure>
flex-basis: auto;

flex-basis は CSS のプロパティで、フレックスアイテムの主要部分の初期の寸法を設定する。 box-sizing で設定していない限り、このプロパティはコンテンツボックスの寸法を定義する。

上述の box-sizing とは CSS のプロパティで、要素の全体の幅と高さをどのように計算するのかを設定する。例えば、「box-sizing: border-box;」とか「content-box」の設定がある。

値は、絶対的な<length>(width、height、margin、padding、border-width、font-size、text-shadow など数多くの CSS プロパティ)、親のフレックスコンテナの主軸方向の寸法に対する <percentage>、あるいは auto キーワードで定義する。負の値は無効であり、初期値は auto である。

container

display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;

item

(item1:)flex-basis: auto;
(item2:)flex-basis: auto;
(item3:)flex-basis: auto;

There is an exception
to every
rule.
flex-basis: content;

自動拡大縮小設定を行うための content キーワードを指定する。横幅(高さ)をコンテンツの横幅(高さ)から決定する。

container

display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: center;

item

(item1:)flex-basis: content;
(item2:)flex-basis: content;
(item3:)flex-basis: content;

You are
a new person,
different from before.
gap

均等幅(同じサイズ)に並んでいるアイテム間を「gap」を使って調整する。

container

display: flex;
flex-wrap: nowrap;
flex-direction: row;
gap: 10px;

item

(item1:)flex: 1 1 0%;
(item2:)flex: 1 1 0%;
(item3:)flex: 1 1 0%;

1
2
3
flex-basis: 50%; (flex: 1 1 50%;)

親のフレックスコンテナの主軸方向の寸法に対してアイテムの幅(高さ)を percentage で指定する。

flex: の property にて長さが1つだけ定義されていた場合(flex: 50%;)は flex-basis の値として認識される。このとき、flex-grow と flex-shrink のデフォルトは1である。(flex: 1 1 50%; と同じ)

container

display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: center;

item

(item1:)flex-basis: 25%;
(item2:)flex-basis: 50%;
(item3:)flex-basis: 25%;

1111
2222
3333

container

display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: center;

item

(item1:)flex: 25%;
(item2:)flex: 50%;
(item3:)flex: 25%;

1111
2222
3333

container

display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: center;

item

(item1:)flex: 1 1 25%;
(item2:)flex: 1 1 50%;
(item3:)flex: 1 1 25%;

1111
2222
3333
Flexbox と marign: auto;

margin-top: auto; は下寄せに配置される

container

display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;

item

(item1:)flex: 1 1 100px; height: 24px;
(item2:)flex: 1 1 100px; height: 24px; margin-top: auto;
(item3:)flex: 1 1 100px; height: 24px;

1
2
3
margin-left: auto; は右寄せに配置される

margin-left: auto; は右寄せに配置される

container

display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;

item

(item1:)flex: 1 1 100px; height: 24px;
(item2:)flex: 1 1 100px; height: 24px; margin-left: auto;
(item3:)flex: 1 1 100px; height: 24px;

1
2
3
アイテムひとつを水平と垂直方向の中央に配置

子要素が1つしかない場合、margin: auto; は水平と垂直方向の中央に配置する。

container

display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;

item

(item1:)flex: 1 1 100px; height: 24px;; margin: auto;

2
左に画像 右にテキスト
Jean Seberg

「A bout de souffle」
1960 French crime drama film. Directed and written by Jean-Luc Godard, starring Jean-Paul Belmondo and Jean Seberg.

2column の場合

左の列は 40%

右の列は auto

<div class="component-2">
  <p class="item-left">左の列は 40%</p>
  <p class="item-right">右の列は auto</p>
</div>
.component-2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: auto;
  width: 100%;
  margin-bottom: 16px;
}
.item-left {
  flex: 0 0 40%;
  background-color: #daf5b8;
  height: auto;
  border-top: 1px solid #333;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
  border-left: 1px solid #333;
  padding: 10px;
}
.item-right {
  flex: 1 1 auto;
  background-color: #f7f7f7;
  height: auto;
  border-top: 1px solid #333;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
  border-left: none;
  padding: 10px;
}
flex-grow・flex-shrinkプロパティの値の「1」or「0」

フレックスコンテナに余白があるときに伸びてほしいとき、伸びてほしくないとき、またフレックスコンテナに余白がないとき（またははみ出るとき）に、縮んでほしいとき、縮んでほしくないときにどうするか？

伸びてほしいときは

flex-grow: 1;
伸びてほしくないときは
flex-grow: 0;

縮んでほしい

flex-shrink: 1;
縮みたくないは flex-shrink: 0;