Angabe der Breite eines Flexbox Flex Artikels: Breite oder Basis?

Question

Sagen wir, ich mache 3 Flex-Spalten, die erste 50%, die anderen beiden automatisch anpassen.

.half { 
    flex: 0 0 auto ; 
    width: 50% ; 
} 

oder

.half { 
    flex: 0 0 50%; 
} 

Diese scheinen funktionell gleich zu sein. Sind sie?

Answer 1

Die untere Anweisung ist äquivalent zu:

.half { 
    flex-grow: 0; 
    flex-shrink: 0; 
    flex-basis: 50%; 
} 

, die, in diesem Fall äquivalent sein würden, wie die Box behält bog nicht erlaubt ist, und daher ist die anfängliche Breite eingestellt von Flex-Basis.

Flex-basis definiert die Standardgröße eines Elements, bevor der verbleibende Platz verteilt wird. Wenn das Element also flexibel ist (Vergrößern/Verkleinern), darf es nicht 50% der Breite der Seite betragen.

Ich habe festgestellt, dass ich regelmäßig https://css-tricks.com/snippets/css/a-guide-to-flexbox/ für Hilfe in Bezug auf Flexbox zurückkehren :)

Answer 2

Sie können es machen schnörkellos (flex-Basis und Breite sind ähnlich):

body { 
 
    display:flex; 
 
} 
 
div { 
 
    border:solid; 
 
} 
 
.half { 
 
    width:50%;/* do not mind flex, just set a width if that speaks to you and older browsers */ 
 
} 
 
.wil { 
 
    flex:1;/* will spray evenly in room left . flex-basis is here auto */ 
 
}

<div class="half"> 50% </div> 
 
<div class="wil"> share what's left</div> 
 
<div class="wil"> share what's left</div>

Sie auch Dinge und Unordnung Dinge wickeln kann Verhaltensweisen zu sehen ..

body { 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
} 
 
div { 
 
    border:solid; 
 
} 
 
.half { 
 
    width:50%;/* do not mind flex, just set a width if that speaks to you */ 
 
} 
 
.wil { 
 
    flex:1;/* will spray evenly in room left , flex-basis is here auto you can use min and max size to make it a bit more flexible */ 
 
    min-width:20%;/* set a min-width*/ 
 
    max-width:450px; /* and also a max-width */ 
 
}

<div class="half"> 50% </div> 
 
<div class="wil"> share what's left</div> 
 
<div class="wil"> share what's left</div> 
 
<!-- lets see how it behaves when wrapping withiut real order --> 
 
<div class="half"> 50% </div> 
 
<div class="wil"> share what's left</div> 
 
<div class="wil"> share what's left</div> 
 

 
<div class="wil"> share what's left</div> 
 
<div class="half"> 50% </div> 
 
<div class="wil"> share what's left</div> 
 
<div class="wil"> share what's left</div> 
 
<div class="wil"> share what's left</div> 
 
<div class="wil"> share what's left</div> 
 

 
<div class="half"> 50% </div> 
 
<div class="wil"> share what's left</div> 
 
<div class="wil"> share what's left</div> 
 

 
<div class="half"> 50% </div> 
 
<div class="wil"> share what's left</div>