html - guia - mostly fluid

Flexbox no da igual ancho a los elementos.

Question

Intentar una barra de flexbox que tenga hasta 5 elementos y tan poco como 3, pero no está dividiendo el ancho equitativamente entre todos los elementos.

Fiddle

El tutorial en el que estoy modelando esto 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>

Answer 1

Hay una parte importante que no se menciona en el artículo al que se vinculó y que es flex-basis . Por defecto flex-basis es 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 mide el tamaño del elemento flexible en función de su contenido).

Cada elemento flexible tiene una flex-basis que es similar a su tamaño inicial. Luego, a partir de ahí, cualquier espacio libre restante se distribuye proporcionalmente (en función de flex-grow ) entre los elementos. Con auto , esa base es el tamaño del contenido (o 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 establecer flex-basis: 0 . Esto establecerá la base flexible en 0 y luego el espacio restante (que será todo el espacio, ya que todas las bases son 0) se distribuirá proporcionalmente en función de la flex-grow .

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

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

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

Answer 2

Para crear elementos con el mismo ancho usando Flex , debe establecer su hijo (elementos de flexión):

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

Dará a todos los elementos en fila 25% de ancho. No crecerán y se irán uno por uno.