css - manejo - ¿Cómo hacer que los artículos flexbox sean del mismo tamaño?

inline-flex

Question

Quiero usar flexbox que tiene una cierta cantidad de elementos que son todos del mismo ancho. Me di cuenta de que flexbox distribuye el espacio de manera uniforme, en lugar del espacio en sí.

Por ejemplo:

.header {
  display: flex;
}

.item {
  flex-grow: 1;
  text-align: center;
  border: 1px solid black;
}

<div class="header">
  <div class="item">asdfasdfasdfasdfasdfasdf</div>
  <div class="item">z</div>
</div>

El primer artículo es mucho más grande que el segundo. Si tengo 3 elementos, 4 elementos o n elementos, quiero que todos aparezcan en la misma línea con la misma cantidad de espacio por elemento.

¿Algunas ideas?

http://codepen.io/anon/pen/gbJBqM

Answer 1

Ajústelos para que su flex-basis sea 0 (para que todos los elementos tengan el mismo punto de partida), y permita que crezcan:

flex: 1 1 0

Answer 2

Debe agregar width: 0 para que las columnas sean iguales si el contenido de los elementos lo hace crecer más.

.item {
  flex: 1 1 0;
  width: 0;
}

Aquí está el enlace que me ayudó a resolver mi problema: siempre iguales columnas de Flexbox

Answer 3

La respuesta aceptada por Adam ( flex: 1 1 0 ) funciona perfectamente para contenedores flexbox cuyo ancho es fijo o determinado por un antepasado. Situaciones en las que desea que los niños encajen en el contenedor.

Sin embargo, puede tener una situación en la que desea que el contenedor se ajuste a los niños, con los niños del mismo tamaño en función del niño más grande. Puede hacer que un contenedor flexbox se ajuste a sus hijos de la siguiente manera:

• position: absolute ajuste position: absolute y sin width ajuste o right , o
• colóquelo dentro de un contenedor con display: inline-block

Para tales contenedores flexbox, la respuesta aceptada NO funciona, los niños no tienen el mismo tamaño. Supongo que esta es una limitación de flexbox, ya que se comporta igual en Chrome, Firefox y Safari.

La solución es usar una cuadrícula en lugar de una caja flexible.

Demostración: https://codepen.io/brettdonald/pen/oRpORG

<p>Normal scenario — flexbox where the children adjust to fit the container — and the children are made equal size by setting {flex: 1 1 0}</p>

<div id="div0">
  <div>
    Flexbox
  </div>
  <div>
    Width determined by viewport
  </div>
  <div>
    All child elements are equal size with {flex: 1 1 0}
  </div>
</div>

<p>Now we want to have the container fit the children, but still have the children all equally sized, based on the largest child. We can see that {flex: 1 1 0} has no effect.</p>

<div class="wrap-inline-block">
<div id="div1">
  <div>
    Flexbox
  </div>
  <div>
    Inside inline-block
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>
</div>

<div id="div2">
  <div>
    Flexbox
  </div>
  <div>
    Absolutely positioned
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>

<br><br><br><br><br><br>
<p>So let''s try a grid instead. Aha! That''s what we want!</p>

<div class="wrap-inline-block">
<div id="div3">
  <div>
    Grid
  </div>
  <div>
    Inside inline-block
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>
</div>

<div id="div4">
  <div>
    Grid
  </div>
  <div>
    Absolutely positioned
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>

body {
  margin: 1em;
}

.wrap-inline-block {
  display: inline-block;
}

#div0, #div1, #div2, #div3, #div4 {
  border: 1px solid #888;
  padding: 0.5em;
  text-align: center;
  white-space: nowrap;
}

#div2, #div4 {
  position: absolute;
  left: 1em;
}

#div0>*, #div1>*, #div2>*, #div3>*, #div4>* {
  margin: 0.5em;
  color: white;
  background-color: navy;
  padding: 0.5em;
}

#div0, #div1, #div2 {
  display: flex;
}

#div0>*, #div1>*, #div2>* {
  flex: 1 1 0;
}

#div0 {
  margin-bottom: 1em;
}

#div2 {
  top: 15.5em;
}

#div3, #div4 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
}

#div4 {
  top: 28.5em;
}

Answer 4

Puede agregar flex-basis: 100% para lograr esto.

Ejemplo actualizado

.header {
  display: flex;
}

.item {
  flex-basis: 100%;
  text-align: center;
  border: 1px solid black;
}

Por lo que vale, también puede usar flex: 1 para obtener los mismos resultados.

La abreviatura de flex: 1 es lo mismo que flex: 1 1 0 , que es equivalente a:

.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  text-align: center;
  border: 1px solid black;
}