web-dev-qa-db-ja.com

flex-growプロパティを理解していませんか？

フレックスグローを理解してはいけません。以下のJSFiddleにジャンプした場合-私が理解する方法、.bigは、他の.flex-item。ご覧のとおり、そうではありません。どうして？

http://jsfiddle.net/nrur6mmo/

.flex-container {
    display:flex;
    padding:0 20%;
}
.flex-item {
    flex-grow:1;
    list-style-type:none;
    border:1px solid black;
}
.big {
    flex-grow:3;
}
<ul class="flex-container">
    <li class="flex-item big">Why isn't this exactly three times the size of the other one?</li>
    <li class="flex-item">Not really working like expected I don't think...</li>
</ul>
cssflexboxflex-grow
40
Ethan C

flex-basisの値も指定する必要があります（このプロパティを指定しないと、初期値 auto を使用した場合と同様の動作が発生します）。

flex-basis: 0;を両方の子に追加するか、単に 速記 で設定します。

.flex-item {
    flex: 1; /* flex-basis is 0 if omitted */
}
.big {
    flex-grow: 3;
}

http://codepen.io/anon/pen/JEcBa

64
Natsu

フレックスグローは、一般的にこのように誤解されています。フレックスグローは、残りのスペースがフレックスアイテム間でどのように配分されるかを制御するだけで、フレックスアイテムが互いに比例する大きさは制御しません。

あなたが探しているのは本当にこれだけです：

.flex-item {
  width: 25%;
  list-style-type:none;
  border:1px solid black;
}
.big {
  width: 75%;
}

こちらもご覧ください

25
cimmanon

作成者は、一般的な使用に対応するために不特定のコンポーネントを正しくリセットするため、フレックスグローではなくフレックスショートハンドを使用して柔軟性を制御することをお勧めします。

https://drafts.c​​sswg.org/css-flexbox/#propdef-flex-grow

.flex-item {
   flex: 1;
}
.big {
   flex: 3;
}

これは実際の例です

http://codepen.io/anon/pen/VjZYPV

4
wilcus