0
.left{ flex: 0 100px; }
.right{ flex: 0 100px; }
.center { flex: 1; }

画像の説明をここに入力

.left {
  flex: 100px;
  background: tomato;
}
.right {
  flex: 100px;
  background: pink;
}
.center {
  flex: 1;
  background: skyblue;
}

と書くと、
下の画像のように、
左右の100pxが効かなくなります。

省略されるのが、flex-growになっているみたいです!

画像の説明をここに入力

デフォルトでは

flex-grow:0
flex-shrink:1
flex-basis:auto

のはずですから、
上の場合、

.left{ flex: 0 1 100px; }
.right{ flex: 0 1 100px; }
.left{ flex: 1 1 auto; }

となっているかとおもいきや、
これとは違う結果となります。
どうも下のようになっているようです。

.left {
  flex: 0 0 100px;
  background: tomato;
}
.right {
  flex: 0 0 100px;
  background: pink;
}
.center {
  flex: 1 0 auto;
  background: skyblue;
}

3つとも
flex-shrinkが0になっているようです!

.left{ flex: 1 100px; }

と書いた時、
省略されるのはどのプロパティですか?

1 件の回答 1

2

https://www.w3.org/TR/css-flexbox/#propdef-flex によると、flexの構文は以下のようになっています。

none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]

それを踏まえて、上記の

.left{ flex: 1 100px; }

を考えると、省略されるのは flex-shrink となります。
また、上記のW3Cの定義によると、

<‘flex-grow’>
When omitted, it is set to 1.
<‘flex-shrink’>
When omitted, it is set to 1.
<‘flex-basis’>
When omitted from the flex shorthand, its specified value is 0.

とあり、それぞれ省略されたときの値は 1 1 0 となっているようです。
したがって、

.left {
  flex: 100px;
  background: tomato;
}
.right {
  flex: 100px;
  background: pink;
}
.center {
  flex: 1;
  background: skyblue;
}

を略記せずに書くと、

.left {
  flex: 1 1 100px;
  background: tomato;
}
.right {
  flex: 1 1 100px;
  background: pink;
}
.center {
  flex: 1 1 0;
  background: skyblue;
}

となるかと思います。
flexboxについてあまり詳しくなかったので試してみたところ、見た目は同じようになるようですね。

*{
  width: 100%;
  height: 50px;
}

.flexbox {
  display: flex;
}

.flexbox>.left {
  flex: 100px;
  background: tomato;
}

.flexbox>.center {
  flex: 1;
  background: skyblue;
}

.flexbox>.right {
  flex: 100px;
  background: pink;
}

.flexbox2 {
  display: flex;
}

.flexbox2>.left {
  flex: 1 1 100px;
  background: tomato;
}

.flexbox2>.center {
  flex: 1 1 0;
  background: skyblue;
}

.flexbox2>.right {
  flex: 1 1 100px;
  background: pink;
}
<div class="flexbox">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

<br>

<div class="flexbox2">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

3
  • 丁寧なご回答ありがとうございます!W3Cの上のページでは、表の部分のInitialがそれぞれ「flex-grow:0、flex-shrink: 1、flex-basis: auto」と書かれていますので、初期値と省略された時の値は異なるということのようですね。なかなか分かりにくですね。
    – aqua
    Commented 2017年4月28日 16:08
  • 1
    よく見てみたら表の中は1 0 autoになっていますね。 draft版では0 1 autoに修正されているようなので単なる誤表記かと思ったら、意外と深い議論がなされていました。初期値と省略されたときの値が〜〜のところにも関わってきそうな話題だったので、参考までに。 github.com/w3c/csswg-drafts/issues/223
    – litmon
    Commented 2017年4月28日 16:44
  • ありがとうございます!参考にさせていただきます。
    – aqua
    Commented 2017年4月28日 16:49

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。