異なる幅でレンダリングされた行のフレックス

Question

htmlでcss flexboxを使用して3つのボックスを作成しましたが、Chromeは異なるサイズのボックスをレンダリングしています。

ドラッグは、ブラウザの境界線は、ビューを小さくします。

ありがとうございました！

Codepen：https://codepen.io/labanino/pen/rGaNLP

body { 
 
    font-family: Arial; 
 
    font-size: 2rem; 
 
    text-transform: uppercase; 
 
} 
 

 
.flex { 
 
    height: 200px; 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
.flex>section { 
 
    flex: 1 1 auto; 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
    text-align: center; 
 
} 
 

 
.flex>section:nth-child(1) { 
 
    background: brown; 
 
    margin-right: 20px; 
 
    border: 1px solid #999; 
 
} 
 

 
.flex>section:nth-child(2) { 
 
    background: pink; 
 
    margin-right: 20px; 
 
    border: 1px solid #999; 
 
} 
 

 
.flex>section:nth-child(3) { 
 
    background: green; 
 
    margin-right: 0; 
 
    border: 1px solid #999; 
 
}

<div class="flex"> 
 
    <section>Brown</section> 
 
    <section>Pink</section> 
 
    <section>Green</section> 
 
</div>

Answer 1

あなたの項目のためのあなたのフレックスプロパティでautoを使用しないでください。 100％を使用すると、フレックスボックスの幅が調整され、追加する要素の数に応じて調整されます（3つ以上を追加する場合）。あなたがautoを使用する場合、それはボックスの内容にその幅を拠点とするので、彼らはすべての異なるサイズだ

.flex > section { 
    flex: 1 1 100%; 
    display: flex; 
    justify-content: center; 
    flex-direction: column; 
    text-align: center; 
} 

理由があります。だから、ピンクという言葉は「グリーン」よりもスペースが少なくて済むので、中央のものはそれほど広くはありません。ここで

Answer 2

は、問題のソースです：

.flex > section { flex: 1 1 auto } 

これはに壊れる：

• flex-grow: 1
• flex-shrink: 1
• flex-basis: auto

flex-basis: autoを使用すると、コンテンツの長さに基づいてアイテムのサイジングが行われます。したがって、より広いコンテンツはより広いアイテムを作成するでしょう。

あなたは、行のすべての項目について、同じサイズにしたい場合は、使用します。

• flex-basis: 0、およびflex-basis: 0で
• min-width: 0/overflow: hidden

あなたは、各項目ANに配分していますコンテナ内の空間の均等な分布。ここでは詳細：Make flex-grow expand items based on their original size

min-width: 0で

かoverflow: hiddenあなたはアイテムが、その内容を過ぎて縮小することができているので、彼らは、小さな画面上で同じサイズ残ることができます。ここでは詳細：Why doesn't flex item shrink past content size?

.flex { 
 
    display: flex; 
 
    height: 200px; 
 
} 
 
.flex>section { 
 
    flex: 1;   /* new; same as flex: 1 1 0 */ 
 
    overflow: hidden; /* new */ 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    text-align: center; 
 
} 
 

 
/* non-essential demo styles */ 
 
.flex>section:nth-child(1) { 
 
    background: brown; 
 
    margin-right: 20px; 
 
    border: 1px solid #999; 
 
} 
 
.flex>section:nth-child(2) { 
 
    background: pink; 
 
    margin-right: 20px; 
 
    border: 1px solid #999; 
 
} 
 
.flex>section:nth-child(3) { 
 
    background: green; 
 
    margin-right: 0; 
 
    border: 1px solid #999; 
 
} 
 
body { 
 
    font-family: Arial; 
 
    font-size: 2rem; 
 
    text-transform: uppercase; 
 
}

<div class="flex"> 
 
    <section>Brown</section> 
 
    <section>Pink</section> 
 
    <section>Green</section> 
 
</div>

revised codepen