css - examples - Especificar el ancho de un elemento de flexbox flex: ¿ancho o base?

flexbox generator

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cuáles son las diferencias entre la base flexible y el ancho? 3 respuestas

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?

Answer 1

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 :)

Answer 2

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>