Flexbox no da igual ancho a los elementos


368

Intentando un navegador flexbox que tiene hasta 5 elementos y tan poco como 3, pero no divide el ancho por igual entre todos los elementos.

Violín

El tutorial que estoy modelando después es http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/

HABLAR CON DESCARO A

* {
  font-size: 16px;
}

.tabs {
  max-width: 1010px;
  width: 100%;
  height: 5rem;
  border-bottom: solid 1px grey;
  margin: 0 0 0 6.5rem;
  display: table;
  table-layout: fixed;
}
.tabs ul {
  margin: 0;
  display: flex;
  flex-direction: row;
}
.tabs ul li {
  flex-grow: 1;
  list-style: none;
  text-align: center;
  font-size: 1.313rem;
  background: blue;
  color: white;
  height: inherit;
  left: auto;
  vertical-align: top;
  text-align: left;
  padding: 20px 20px 20px 70px;
  border-top-left-radius: 20px;
  border: solid 1px blue;
  cursor: pointer;
}
.tabs ul li.active {
  background: white;
  color: blue;
}
.tabs ul li:before {
  content: "";
}
<div class="tabs">
  <ul>
    <li class="active" data-tab="1">Pizza</li>
    <li data-tab="2">Chicken Noodle Soup</li>
    <li data-tab="3">Peanut Butter</li>
    <li data-tab="4">Fish</li>
  </ul>
</div>


1
dar un ancho mínimo a su mesa como y establecer un relleno con unidades vw podría ayudar: jsfiddle.net/2nY9N/2 suelte el crecimiento flexible y simplemente haga flex: 1; usará valores predeterminados para las otras 2 propiedades
G-Cyrillus

Respuestas:


908

Hay una parte importante que no se menciona en el artículo al que se vinculó y que es flex-basis. Por defecto flex-basises auto.

De la especificación :

Si la base flexible especificada es automática, la base flexible utilizada es el valor de la propiedad de tamaño principal del elemento flexible. (Esta puede ser la palabra clave auto, que dimensiona el elemento flexible en función de su contenido).

Cada elemento flexible tiene un flex-basistipo similar a su tamaño inicial. Luego, a partir de ahí, cualquier espacio libre restante se distribuye proporcionalmente (según flex-grow) entre los elementos. Con auto, esa base es el tamaño del contenido (o el tamaño definido con width, etc.). Como resultado, a los elementos con texto más grande se les da más espacio en general en su ejemplo.

Si desea que sus elementos sean completamente uniformes, puede configurarlos flex-basis: 0. Esto establecerá la base flexible en 0 y luego cualquier espacio restante (que será todo el espacio ya que todas las bases son 0) se distribuirá proporcionalmente en función de flex-grow.

li {
    flex-grow: 1;
    flex-basis: 0;
    /* ... */
}

Este diagrama de la especificación hace un buen trabajo al ilustrar el punto.

Y aquí hay un ejemplo de trabajo con su violín.


3
Estas ruinas envueltas para mí en Safari.
Muñeco de nieve

77
Lo sorprendente de esta respuesta es que usted explica la base flexible con este ejemplo mejor que en cualquier otro lugar literalmente en todo Internet. Me pondré en contacto con MIT para darle una cátedra honoraria.
dudewad

96
Sólo para mencionar que flex: 1;es la abreviatura de combinación de flex-grow: 1, flex-basis: 0.
Vadim Ovchinnikov

1
Por si acaso alguien quiere saber en profundidad, me encontré con este gran artículo en la web: css-tricks.com/flex-grow-is-weird
Kuldeep Kumar

Oh hombre, siempre me pega en la cabeza cuando pensaba que entendía CSS.
ibic

15

Para crear elementos con el mismo ancho de uso Flex, debe establecer el elemento secundario de su hijo (elementos flexibles):

flex-basis: 25%;
flex-grow: 0;

Dará a todos los elementos de la fila 25% de ancho. No crecerán e irán uno por uno.


77
Esto es bastante incómodo ya que disminuye el beneficio de la flexión por completo. Si va a codificar los tamaños de columna, hay formas más fáciles de resolver las cosas.
Kloar

3
eso no está mal en absoluto ... si quieres tener cajas con la misma longitud y desglosadas cuando la fila está completamente ocupada ... puedes lograrlo así fácilmente. Tal vez establezca también el ancho mínimo si necesita un ancho mínimo
Ilario Engler,

1
@Kloar Estás diciendo que es el único beneficio de los flexboxes ... Sin duda, pueden ser beneficiosos cuando necesitas anchos iguales, por ejemplo, para la capacidad de respuesta. Además, ¿no es que los flexboxes no son fáciles?
user2999349
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.