Quelles sont les différences entre flex-basis et width?

Considérez flex-direction

La première chose qui vient à l'esprit lors de la lecture de votre question Est que flex-basis ne s'applique pas toujours à width.

Quand flex-direction est row, flex-basis contrôle la largeur.

Mais quand flex-direction est column, flex-basis contrôle la hauteur.

---

Différences Clés

Voici quelques différences importantes entre les flex-basis et width / height:

• flex-basis s'applique uniquement à la flexion des éléments. Les conteneurs Flex (qui ne sont pas aussi des éléments flex) ignorer flex-basis, mais peut utiliser width et height.

• flex-basis ne fonctionne que sur l'axe principal. Par exemple, si vous êtes dans flex-direction: column, la propriété width serait nécessaire pour dimensionner les éléments flex horizontalement.

• flex-basis n'a aucun effet sur les éléments flex absolument positionnés. Les propriétés width et height seraient nécessaires. les éléments flex absolument positionnés ne participent pas à la mise en page flex.

• En utilisant la propriété flex, trois propriétés – flex-grow, flex-shrink et flex-basis – peuvent être parfaitement combinés en une seule déclaration. En utilisant width, la même règle nécessiterait plusieurs lignes de code.

---

Comportement Du Navigateur

En termes de rendu, il ne devrait y avoir aucune différence entre flex-basis et width, sauf si flex-basis est auto ou content.

à Partir de la spécification:

7.2.3. Le flex-basis propriété

Pour toutes les valeurs autres que auto et content, flex-basis est résolu de la même manière que width, horizontal modes d'écriture.

, Mais l'impact de auto ou content peut être minime ou rien du tout. Plus de la spécification:

auto

Lorsqu'il est spécifié sur un élément flex, le mot clé auto récupère la valeur de la propriété main size comme flex-basis utilisé. Si cette valeur est elle-même auto, alors la valeur utilisée est content.

content

Indique le dimensionnement automatique, basé sur le contenu de l'élément flex.

Remarque: Cette valeur n'est pas présente dans la version initiale de Flexible Layout Box, et donc certaines implémentations plus anciennes ne le supporteront pas. L'effet équivalent peut être obtenu en utilisant auto avec un taille principale (width ou height) de auto.

Donc, selon la spécification, flex-basis et width résoudre identique, sauf si flex-basis est auto ou content. Dans de tels cas, flex-basis peut utiliser la largeur de contenu (que, vraisemblablement, la propriété width utiliserait également).

---

Le facteur flex-shrink

Il est important de se rappeler les paramètres initiaux d'un conteneur flex. Certains de ces paramètres comprennent:

• flex-direction: row - les éléments flexibles s'aligneront horizontalement
• justify-content: flex-start - les éléments flexibles seront empilés au début de la ligne sur l'axe principal
• align-items: stretch - les éléments flexibles développer pour couvrir la taille transversale du conteneur
• flex-wrap: nowrap - les éléments flexibles sont obligés de rester sur une seule ligne
• flex-shrink: 1 - un élément flexible est autorisé à rétrécir

Notez le dernier réglage.

Étant donné que les éléments flex sont autorisés à rétrécir par défaut (ce qui les empêche de déborder du conteneur) , le flex-basis / width / height peut être remplacé.

Par exemple flex-basis: 100px ou width: 100px, couplé avec flex-shrink: 1, ne sera pas nécessairement 100px.

Pour rendre la largeur spécifiée – et le maintenir fixe, vous devrez désactiver le rétrécissement:

div {
   width: 100px;
   flex-shrink: 0;
}  

Ou

div {
  flex-basis: 100px;
  flex-shrink: 0;
}

Ou, comme recommandé par la spécification:

flex: 0 0 100px;    /* don't grow, don't shrink, stay fixed at 100px */

7.2. Les composants de La flexibilité

Les auteurs sont encouragés à contrôler la flexibilité en utilisant le raccourci flex plutôt qu'avec ses propriétés de longhand directement, comme le raccourci correctement réinitialise quelconque des composants accueillir commune utilise.

---

Bugs Du Navigateur

Bug affectant tous les principaux navigateurs, sauf IE 11 & Edge:

flex-basis ignoré dans un conteneur flex imbriqué. width fonctionne.

Un problème a été trouvé lors du dimensionnement d'éléments flex dans un conteneur flex imbriqué.

Lors de l'utilisation de flex-basis, le conteneur ignore le dimensionnement de ses enfants, et les enfants de débordement du récipient. Mais avec la propriété width, le conteneur respecte le dimensionnement de ses enfants et se développe en conséquence. Ce n'est pas un problème dans IE11 et Edge.

Références:

• Chrome ne développe pas Flex parent en fonction du contenu des enfants
• différence entre largeur et flex-basis
• Flex-basis est ignoré lors du dimensionnement des conteneurs Flex imbriqués.
• Flex-base: 100px fait quelque chose de différent de largeur: 100px + flex-base: auto

Exemples:

• https://jsfiddle.net/t419zhra/ (source: @Dremora)
• https://jsfiddle.net/voc9grx6/ (source: Chrome Bugs)
• https://jsfiddle.net/qjpat9zk/ (source: Chrome Bugs)

Éléments flexibles utilisant flex-basis et white-space: nowrap débordement inline-flex conteneur. width fonctionne.

Il semble qu'un flex le conteneur défini sur inline-flex ne reconnaît pas flex-basis sur un enfant lors du rendu d'un frère avec white-space: nowrap (bien que ce puisse être un élément avec une largeur indéfinie). Le conteneur ne s'étend pas pour accueillir les éléments.

Mais lorsque la propriété width est utilisée à la place de flex-basis, le conteneur respecte le dimensionnement de ses enfants et se développe en conséquence. Ce n'est pas un problème dans IE11 et Edge.

Références:

• inline Flex conteneur Largeur pas croissance
• le conteneur flex Inline (display: inline-flex) étend la largeur totale du conteneur parent

Exemple:

• https://jsfiddle.net/p18h0jxt/1/ (du premier message ci-dessus)

---

Bogues affectant IE 10 et 11:

• flex les déclarations abrégées avec des valeurs flex-basis sans unité sont ignorées
• flex-basis ne tient pas compte de box-sizing: border-box
• flex-basis ne prend pas en charge calc()
• l'Importance est ignoré sur flex-basis lors de l'utilisation de flex abréviation