flex：1の意味？

我々はすべて知っているように、flexプロパティがの省略形ですflex-grow、flex-shrink、およびflex-basisプロパティが。デフォルト値はです0 1 auto。これは、

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

しかし、私は気づいた、多くの場所flex: 1で使用されています。それがために簡略化したものです1 1 autoか1 0 auto？それが何を意味するのか理解できず、ググっても何も得られません

ここに説明があります：

https://www.w3.org/TR/css-flexbox-1/#flex-common

flex：<positive-number>
flexと同等：<positive-number> 10。フレックスアイテムをフレキシブルにし、フレックスベーシスをゼロに設定して、フレックスコンテナー内の指定された割合の空き領域を受け取るアイテムになります。フレックスコンテナー内のすべてのアイテムがこのパターンを使用する場合、それらのサイズは指定されたフレックスファクターに比例します。

したがってflex:1、flex: 1 1 0

flex: 1 以下を意味します：

flex-grow : 1;    ➜ The div will grow in same proportion as the window-size       
flex-shrink : 1;  ➜ The div will shrink in same proportion as the window-size 
flex-basis : 0;   ➜ The div does not have a starting value as such and will 
                     take up screen as per the screen size available for
                     e.g:- if 3 divs are in the wrapper then each div will take 33%.

注意してください

一部のブラウザでは：

flex:1; 等しくないflex:1 1 0;

flex:1;= flex:1 1 0n;（nは長さの単位です）。

• flex-grow： アイテムが他のフレキシブルアイテムと比較してどれだけ大きくなるかを指定する数値。
• flex-shrink アイテムが他のフレキシブルアイテムと比較してどの程度縮小するかを指定する数値
• flex-basis アイテムの長さ。有効な値：「auto」、「inherit」、または数字の後に「％」、「px」、「em」、またはその他の長さの単位。

ここで重要なのは、フレックスベースには長さの単位が必要であるということです。

例えばChromeのflex:1とflex:1 1 0異なる結果を生成します。ほとんどの状況でflex:1 1 0;は動作しているように見えるかもしれませんが、実際に何が起こっているのか調べてみましょう。

例

フレックス基準は無視され、フレックスグローとフレックスシュリンクのみが適用されます。

flex:1 1 0;= flex:1 1;=flex:1;

これは一見問題ないように見えるかもしれませんが、コンテナの適用されたユニットがネストされている場合。予想外を期待する！

この例をChromeでお試しください

.Wrap{
  padding:10px;
  background: #333;
}
.Flex110x, .Flex1, .Flex110, .Wrap {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.Flex110 {
  -webkit-flex: 1 1 0;
  flex: 1 1 0;
}
.Flex1 {
  -webkit-flex: 1;
  flex: 1;
}
.Flex110x{
  -webkit-flex: 1 1 0%;
  flex: 1 1 0%;
}

FLEX 1 1 0
<div class="Wrap">
  <div class="Flex110">
    <input type="submit" name="test1" value="TEST 1">
  </div>
</div>

FLEX 1
<div class="Wrap">
  <div class="Flex1">
    <input type="submit" name="test2" value="TEST 2">
  </div>
</div>

FLEX 1 1 0%
<div class="Wrap">
  <div class="Flex110x">
    <input type="submit" name="test3" value="TEST 3">
  </div>
</div>

互換性

一部のブラウザは仕様に準拠していないため、これが失敗することに注意してください。

完全なフレックス仕様を使用するブラウザ：

• Firefox-✓
• エッジ-✓ （私も知っています、私もショックを受けました。）
• Chrome-x
• ブレイブ-x
• オペラ-x
• IE- （笑、長さの単位なしで機能しますが、長さの単位では機能しません。）

アップデート2019

Chromeの最新バージョンでは、最終的にこの問題が修正されたようですが、他のブラウザではまだ修正されていません。

テスト済みで、Chrome Ver 74で動作しています。