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


368

Tenter une navigation flexbox contenant jusqu'à 5 éléments et aussi peu que 3, mais cela ne divise pas la largeur également 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>


1
donner une largeur minimale à votre table comme et définir un rembourrage avec des unités vw pourrait aider: jsfiddle.net/2nY9N/2 abandonner la flex-grow et juste faire flex: 1; il utilisera les valeurs par défaut pour les 2 autres propriétés
G-Cyrillus

Réponses:


908

Il y a un élément important qui n'est pas mentionné dans l'article auquel vous vous êtes lié et c'est le cas flex-basis. Par défaut, flex-basisc'est auto.

De la spécification :

Si la base flexible spécifiée est auto, la base flexible utilisée est la valeur de la propriété de taille principale de l'élément flexible. (Il peut s'agir du mot-clé auto, qui dimensionne l'élément flexible en fonction de son contenu.)

Chaque élément flexible a un flex-basisqui ressemble à sa taille initiale. Ensuite, à partir de là, tout espace libre restant est réparti proportionnellement (sur la base de flex-grow) entre les éléments. Avec auto, cette base est la taille du contenu (ou la taille définie avec width, etc.). Par conséquent, les éléments contenant un texte plus volumineux reçoivent globalement plus d'espace dans votre exemple.

Si vous souhaitez que vos éléments soient complètement uniformes, vous pouvez définir flex-basis: 0. Cela mettra la base flexible à 0, puis tout espace restant (qui sera tout l'espace puisque toutes les bases sont à 0) sera réparti proportionnellement en fonction de flex-grow.

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

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

Et voici un exemple de travail avec votre violon.


3
Cela ruine mon emballage sur Safari.
Bonhomme de neige

77
La chose impressionnante à propos de cette réponse est que vous expliquez la base flexible avec cet exemple mieux que n'importe où ailleurs sur Internet. Je vais contacter le MIT pour vous donner une chaire honoraire.
dudewad

96
Il suffit de mentionner que flex: 1;est un raccourci pour la combinaison de flex-grow: 1, flex-basis: 0.
Vadim Ovchinnikov

1
Juste au cas où quelqu'un voudrait savoir en profondeur, je suis tombé sur ce grand article sur le web: css-tricks.com/flex-grow-is-weird
Kuldeep Kumar

Oh mec, me frappe toujours sur la tête quand je pensais avoir saisi CSS.
ibic

15

Pour créer des éléments de largeur égale à l'aide de Flex, vous devez définir sur l'enfant de votre (éléments flex):

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

Il donnera à tous les éléments de la ligne une largeur de 25%. Ils ne grandiront pas et iront un par un.


77
C'est assez gênant car cela diminue complètement l'avantage du flex. Si vous allez coder en dur la taille de vos colonnes, il existe des moyens plus simples de résoudre les problèmes.
Kloar

3
ce n'est pas faux du tout .. si vous voulez avoir des boîtes de même longueur et brisées lorsque la rangée est entièrement occupée .. vous pouvez facilement y arriver comme ça. Peut-être que vous définissez également une largeur minimale si vous avez besoin d'une largeur
minimale

1
@Kloar Vous dites que c'est comme le seul avantage des flexboxes ... Elles peuvent certainement être bénéfiques quand vous avez besoin de largeurs égales, par exemple pour la réactivité. De plus, ce n'est pas comme si les flexbox n'étaient pas faciles?
user2999349
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.