フレックス略号のフレックス増加値を省略する

Question

https://www.w3.org/TR/css-flexbox-1/#propdef-flexflex簡略表記を使用した場合、flex-growを省略すると、それは1に設定されます。

Answer 1

、それはまた、これは言う：

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

ダブルバー（||）は、2つの以上のオプションを分離して、1つ以上の（source）を指定する必要があります。

flex: auto 

または

flex: 250px 

または

flex: 33% 

は、上記のすべてのflex-basisコンポーネントを指定します。

この

は flex-growプロパティは、このような何かを書くことで省略することができることを意味します。

（省略）flex-shrinkは、仕様で定義されているように、デフォルトで1になります。

（省略）flex-growは、仕様で定義されているように、デフォルトで1になります。

値の構文の疑問符（?）は、前述のプロパティがオプションであることを意味します。つまり、flex: 2 15emのようなブラウザでは、flex-shrinkはオプションであり、デフォルトは1（source）なので、ユニットレス番号はflex-growに適用されます。

Answer 2

flex: 1です。これは、書き込みの省略形です：だからflex-growがデフォルトで1に設定されている

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

。

は手動のようなものを指定した場合：次に

flex: 1; 
flex-shrink: 0; 

flex-shrinkを0なり、flex-growはまだ1になります。

また、flexを使用するには、親にdisplay: flexが必要です。

希望すると便利です。同じflex property definitionご参照に:)