FlexBox - 幅を制御する特定の子divを指定しますか？

フレックスボックスでは、デフォルトでチャイルドは最も広い要素に従ってサイズ変更されます。FlexBox - 幅を制御する特定の子divを指定しますか？

特定の子供が幅を制御する方法を定義する方法はありますか？セレクタはおそらく？

Codepen：https://codepen.io/dsomekh/pen/rwEYYE

コード：

.center { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.first { 
 
    border: 1px solid red; 
 
    margin-bottom: 0.5vw; 
 
} 
 

 
.second { 
 
    border: 1px solid red; 
 
} 
 

 
.wrapper { 
 
    font-family: Calibri; 
 
    display: flex; 
 
    flex-direction: column; 
 
}

<html> 
 

 
<div class="center"> 
 
    <div class="wrapper"> 
 
    <div class="first">This DIV is bigger. However, can it shrink according to it's brother?</div> 
 
    <div class="second">This div is smaller.Can it control the width?</div> 
 
    </div> 
 
</div> 
 

 
</html>

出典

2017-07-19 David Somekh

だけ明確にする、あなたは小さな子供が自分の幅を持ちたい、とだけ、その内容として同じ大きさか、小さな子供がより大きいのdivを小さくしたいですかその内容？ –

あなたはすべてのdivが自然に最も狭いdivより広くならないことを意味しますか？ – ADyson

特定のdivで他の要素の幅を制御したい。それが大きければ大きくなります。それが小さければ、他は小さくなります。 –

ここで知ることが重要CSSルールです：

flex: {number} {number} {number}は、

第3の数値は、フレックスアイテムのデフォルトサイズ（フレックスアイテムが行内にある場合の幅）です。デフォルトではautoであり、フレックスアイテムのデフォルトサイズはコンテンツによって決まります。

最初の数値と2番目の数値は、主軸に沿って余裕がある場合（他の場合はこのフレックスアイテムが行内にある場合は幅）、他のフレックスアイテムと比較してどれだけ伸縮できるかに比例します。それの内容によって決定されるもの、すなわち、 - -

だから、あなたはは兄弟の本来のサイズへの相対値でフレックス項目のデフォルトサイズを設定することはできませんが（フレックス項目のデフォルトサイズを設定することができますそしてそれは兄弟アイテムです）、すべて同じで、それらを成長させたり、縮小させたりしてください。

は、私は自分自身が、多くの場合、以下のやって見つける：すべての兄弟を引き起こすフレックス項目について

flex: 1 0 0

は同じサイズです。

すべてのフレックスアイテムはデフォルトサイズ0で始まり、すべてのフレックスアイテムが均等になります。最初の数字はすべてのフレックスアイテムで同じです（ここでは1つですが、彼らが必要とするように、すべての兄弟にとって同じです）。周りの学習

ベストフレキシボックスはこちらです：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

EDIT

アイテムは本質的に大きくなるつもりだった、あなたはおそらくflex: 0 0 autoにその項目を設定することによってそれを行う可能性があり、事前に知っていた場合他のすべてのフレックスアイテムをflex: 1 0 0から成長させるようにしていますが、どのサイズが大きいかを事前に知っていないと感じています。

.wrapper { display: flex; } 
 
.wrapper>div { border: 1px solid #000; } 
 
.first { flex: 1 0 0; } 
 
.second { flex: 0 1 auto; }

<div class="center"> 
 
    <div class="wrapper"> 
 
    <div class="first">This DIV is bigger. However, can it shrink according to it's brother?</div> 
 
    <div class="second">This div is smaller.Can it control the width?</div> 
 
    </div> 
 
</div>

出典

2017-07-19 12:52:39 Adam

FlexBox - 幅を制御する特定の子divを指定しますか？

答えて

関連する問題