web-dev-qa-db-fra.com

Flexbox ne donnant pas la même largeur aux éléments

Essayer une flexbox nav qui contient jusqu'à 5 éléments et aussi peu que 3, mais ne divise pas la largeur de manière égale entre tous les éléments.

violon

Le tutoriel que je modélise après est http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/

TOUPET

* {
  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>
htmlcsshtml5css3flexbox
299
itsclarke

Il y a un élément important qui n'est pas mentionné dans l'article auquel vous avez lié le lien flex-basis. Par défaut, flex-basis est auto.

De la spec :

Si la base flex spécifiée est auto, la base flex utilisée est la valeur de la propriété de taille principale de l’élément flex. (Ce peut être lui-même le mot-clé auto, qui redimensionne l'élément flex en fonction de son contenu.)

Chaque élément flexible a un flex-basis qui est un peu comme sa taille initiale. Ensuite, à partir de là, tout espace libre restant est réparti proportionnellement (en fonction de flex-grow) entre les éléments. Avec auto, cette base est la taille du contenu (ou la taille définie avec width, etc.). En conséquence, votre exemple donne plus d’espace aux éléments contenant du texte plus gros.

Si vous voulez que vos éléments soient parfaitement uniformes, vous pouvez définir flex-basis: 0. Cela définira la base de flexion sur 0, puis tout espace restant (qui sera tout espace puisque toutes les bases sont 0) sera distribué proportionnellement sur la base de flex-grow.

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

Ce diagramme de la spécification illustre très bien ce point.

Et voici un exemple de travail avec votre violon.

754
James Montagne

Pour créer des éléments de même largeur en utilisant Flex, vous devez définir le paramètre sur votre enfant (éléments flex):

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

Il donnera à tous les éléments de la rangée 25% de largeur. Ils ne vont pas grandir et aller un par un.

9
alexJS