flexのプロパティを理解する

Question

要素（青色）は、すべての要素ではなく、.aside-1（黄色）と.aside-2（ピンク色）でしか分割されないのはなぜですか？

私たちは、1行を占有するすべての要素を入れているラッパーを持っています。

私が言うとflex: 3 0pxと言うと、この要素は他の4つの要素より3倍大きく、3 /（3 + 1 + 1 + 1 + 1）を占めます。

しかし、私はnowrapラッパーの場合、最小アイテムが.mainであることに気付きました。

wrapで、それは2つの最も近い要素で分けます。

これを理解できません。

.wrapper { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    font-weight: bold; 
 
    text-align: center; 
 
} 
 

 
.wrapper>* { 
 
    padding: 10px; 
 
    flex: 1 100%; 
 
} 
 

 
.header { 
 
    background: tomato; 
 
} 
 

 
.footer { 
 
    background: lightgreen; 
 
} 
 

 
.main { 
 
    text-align: left; 
 
    background: deepskyblue; 
 
    height: 50vh; 
 
    flex: 3 0px; 
 
} 
 

 
.aside-1 { 
 
    background: gold; 
 
} 
 

 
.aside-2 { 
 
    background: hotpink; 
 
} 
 

 
.aside { 
 
    flex: 1 auto; 
 
} 
 

 
.aside-1 { 
 
    order: 1; 
 
} 
 

 
.main { 
 
    order: 2; 
 
} 
 

 
.aside-2 { 
 
    order: 3; 
 
} 
 

 
.footer { 
 
    order: 4; 
 
}

<div class="wrapper"> 
 
    <header class="header">Header</header> 
 
    <article class="main"> 
 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. 
 
     Mauris placerat eleifend leo.</p> 
 
    </article> 
 
    <aside class="aside aside-1">Aside 1</aside> 
 
    <aside class="aside aside-2">Aside 2</aside> 
 
    <footer class="footer">Footer</footer> 
 
</div>

Answer 1

まず、あなたのコード内でこのルールを見てみましょう：

• header：

  .wrapper > * { 
      padding: 10px; 
      flex: 1 100%; 
  } 
  

  を上記セレクタはすべての5つのフレックス項目を目標としています

• article
• aside
• aside
• footer

これまでflexコンポーネントブレーク：

• flex-grow: 1
• flex-shrink: 1（デフォルトでは）
• flex-basis: 100%

あなたが書いた：この例では、.main要素（青）のみ.aside-1（黄色）と.aside-2（ピンク）との空間を分割されたのはなぜ、

をし、すべての要素ではない？

1. コンテナはフレックスアイテムがラップするために許可されている意味、flex-flow: row wrapに設定されています：

は、これが理由です。

上記のように、すべてのフレックスアイテムはflex-basis: 100%（つまりwidth: 100%）に設定されています。つまり、フレックスアイテムは1行につき1つのみ、を除くことができます。

flex-basis: 100%のみ

それは後でカスケードシーケンスに他のルールによって上書きされている... headerとfooterために適用されます：しかし

.main { flex: 3 0px; } 

.aside { flex: 1 auto; } 

私は、nowrapラッパーで最小の項目が.mainであることに気づいた。

上記のように、flex-basis: 0とflex-shrink: 1があります。 .mainで

は、私たちは、私は、この要素は他の4つの要素より大きく3倍になり、3 /（3 + 1 + 1 + 1 + 1）を占めることになると言うと思いますflex: 3 0pxを、言います。

かなりです。 flex-grow: 3は、flex-grow: 1で他のフレックスアイテムより3倍の空き領域を消費することを意味します。必ずしも3倍のサイズになるとは限りません。ここでは詳細：flex-grow not sizing flex items as expected

---

その特異性がカスケードに勝つ必要があります表示されることがあり、そしてすべての項目がflex-basis: 100%を取得する必要があります：

• .wrap > * { flex-basis: 100%; }対aside { flex: 1 auto; }対.main { flex: 3 0px; }
• .wrap > * { flex-basis: 100%; }

universal selector (*) has zero specificityを除きます。したがって、この場合、すべてのセレクタは等しい特異性とソース順序の問題を持ちます。