css - examples - Especificar el ancho de un elemento de flexbox flex: ¿ancho o base?
flexbox generator (2)
Esta pregunta ya tiene una respuesta aquí:
Digamos que estoy haciendo 3 columnas flexibles, primero una 50%, las otras dos se ajustan automáticamente.
.half {
flex: 0 0 auto ;
width: 50% ;
}
o
.half {
flex: 0 0 50%;
}
Estos parecen ser funcionalmente iguales. ¿Son ellos?
La declaración de abajo es equivalente a:
.half {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 50%;
}
Lo que, en este caso, sería equivalente, ya que no se permite que la caja se flexione y, por lo tanto, conserva el ancho inicial establecido por base flexible.
Flex-based define el tamaño predeterminado de un elemento antes de distribuir el espacio restante, por lo que si se permite que el elemento se flexione (aumente / reduzca), no puede ser el 50% del ancho de la página.
Descubrí que vuelvo regularmente a https://css-tricks.com/snippets/css/a-guide-to-flexbox/ para obtener ayuda sobre flexbox :)
Puede hacerlo más simple (la base flexible y el ancho son similares):
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>
Incluso puedes envolver cosas y desordenar cosas para ver comportamientos.
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>