34361

[code]

    .left{ flex: 0 100px; }
    .right{ flex: 0 100px; }
    .center { flex: 1; }
    
[/code]

[![画像の説明をここに入力](https://i.stack.imgur.com/MkRdq.png)](https://i.stack.imgur.com/MkRdq.png)

を

[code]

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

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

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

[![画像の説明をここに入力](https://i.stack.imgur.com/wxXe4.png)](https://i.stack.imgur.com/wxXe4.png)

デフォルトでは

**flex-grow:0  
flex-shrink:1  
flex-basis:auto**  
のはずですから、  
上の場合、

[code]

    .left{ flex: 0 1 100px; }
    .right{ flex: 0 1 100px; }
    .left{ flex: 1 1 auto; }
    
[/code]

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

[code]

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

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

[code]

    .left{ flex: 1 100px; }
    
[/code]

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


CC BY-SA 3.0
2017-04-28T14:37:59.203
34360
2017-04-28T15:33:43.790
2017-04-28T14:43:01.427
12297
12297
question
css
Flexboxで、「.left { flex: 1 100px; } 」　は、「.left { flex: 0 0 100px; 」？


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

[code]

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

それを踏まえて、上記の

[code]

    .left{ flex: 1 100px; }
    
[/code]

を考えると、省略されるのは `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` となっているようです。  
したがって、

[code]

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

を略記せずに書くと、

[code]

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

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

[code]

    *{
      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;
    }
[/code]

[code]

    <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>
[/code]


CC BY-SA 3.0
2017-04-28T15:33:43.790
34361
2017-04-28T15:33:43.790
7655
34360
answer