Quelles sont les différences entre flex-base et largeur?

Il y a eu des questions et des articles à ce sujet, mais rien de concluant pour autant que je sache. Le meilleur résumé que j'ai pu trouver est

flex-based vous permet de spécifier la taille initiale / de départ de l'élément, avant tout autre calcul. Il peut s'agir d'un pourcentage ou d'une valeur absolue.

... qui en soi ne dit pas grand-chose sur le comportement des éléments avec flex-base set. Avec ma connaissance actuelle de flexbox, je ne vois pas pourquoi cela ne pourrait pas décrire la largeur également.

Je voudrais savoir en quoi exactement la flex-base est différente de la largeur dans la pratique:

• Si je remplace largeur par flex-base (et vice versa), qu'est-ce qui changera visuellement?
• Que se passe-t-il si je règle les deux sur une valeur différente? Que se passe-t-il s'ils ont la même valeur?
• Y a-t-il des cas particuliers où l'utilisation de la largeur ou de la base flexible aurait une différence significative par rapport à l'utilisation de l'autre?
• En quoi la largeur et la base flex diffèrent - elles lorsqu'elles sont utilisées en conjonction avec d'autres styles de flexbox, tels que flex-wrap , flex-grow et flex-shrink ?
• Y a-t-il d'autres différences importantes?

Edit / clarification : Cette question a été posée dans un format différent dans Quels ensembles de propriétés flex-based exactement? mais je pensais qu'une comparaison ou un résumé plus direct des différences de flex-base et de largeur (ou de hauteur ) serait bien.

Considérer flex-direction

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

Quand flex-directionest row, flex-basiscontrôle la largeur.

Mais quand flex-directionc'est column, flex-basiscontrôle la hauteur.

Différences clés

Voici quelques différences importantes entre flex-basiset width/ height:

• flex-basiss'applique uniquement aux articles flexibles. Les conteneurs flexibles (qui ne sont pas également des éléments flexibles) ignoreront flex-basismais peuvent utiliser widthet height.

• flex-basisne fonctionne que sur l'axe principal. Par exemple, si vous êtes dedans flex-direction: column, la widthpropriété serait nécessaire pour dimensionner les éléments flexibles horizontalement.

• flex-basisn'a aucun effet sur les éléments flexibles positionnés de manière absolue. widthet les heightpropriétés seraient nécessaires. Les éléments flex absolument positionnés ne participent pas à la mise en page flex .

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

Comportement du navigateur

En ce qui concerne la façon dont ils sont rendus, il devrait y avoir aucune différence entre flex-basiset width, à moins flex-basisest autoou content.

De la spécification:

7.2.3. La flex-basispropriété

Pour toutes les valeurs autres que autoet content, flex-basisest résolu de la même manière que widthdans les modes d'écriture horizontale.

Mais l'impact de autoou contentpeut être minime ou rien du tout. Plus de la spécification:

auto

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

content

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

Remarque: Cette valeur n'était pas présente dans la version initiale de Flexible Box Layout, et donc certaines implémentations plus anciennes ne la prendront pas en charge. L'effet équivalent peut être obtenu en utilisant autoconjointement avec une taille principale ( widthou height) de auto.

Donc, selon la spécification, flex-basiset widthrésolvez à l'identique, sauf si flex-basisest autoou content. Dans de tels cas, flex-basispeut utiliser la largeur du contenu (qui, vraisemblablement, la widthpropriété utiliserait également).

Le flex-shrinkfacteur

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

• flex-direction: row - les éléments flexibles s'aligneront horizontalement
• justify-content: flex-start - les éléments flexibles s'empileront au début de la ligne sur l'axe principal
• align-items: stretch - les articles flexibles se dilateront pour couvrir la taille transversale du conteneur
• flex-wrap: nowrap - les articles 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 flexibles sont autorisés à rétrécir par défaut (ce qui les empêche de déborder du conteneur), le flex-basis/ width/ spécifié heightpeut être remplacé.

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

Pour rendre la largeur spécifiée - et la maintenir fixe - vous devrez désactiver la réduction:

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. Composants de flexibilité

Les auteurs sont encouragés à contrôler la flexibilité en utilisant la flexsténographie plutôt qu'avec ses propriétés de sténographie directement, car la sténographie réinitialise correctement tous les composants non spécifiés pour s'adapter aux utilisations courantes .

Bogues du navigateur

Certains navigateurs ont du mal à dimensionner les éléments flexibles dans des conteneurs flex imbriqués.

flex-basisignoré dans un conteneur flexible imbriqué. widthtravaux.

Lors de l'utilisation flex-basis, le conteneur ignore le dimensionnement de ses enfants et les enfants débordent du conteneur. Mais avec la widthpropriété, le conteneur respecte le dimensionnement de ses enfants et se dilate en conséquence.

Références:

• Chrome ne développe pas le parent flexible selon le contenu des enfants
• Élément flexible débordant lors de l'utilisation de la base flexible
• Différence entre largeur et flex-base
• La base flexible est ignorée lors du dimensionnement des conteneurs flex imbriqués.
• flex-base: 100px fait quelque chose de différent de la largeur: 100px + flex-base: auto

Exemples:

• https://jsfiddle.net/t419zhra/ (source: @Dremora )
• https://codepen.io/anon/pen/NVxaoy (source @Daniel )
• https://jsfiddle.net/voc9grx6/ (source: Chromium Bugs )
• https://jsfiddle.net/qjpat9zk/ (source: Chromium Bugs )

flex éléments à l'aide flex-basiset conteneur de white-space: nowrapdébordement inline-flex. widthtravaux.

Il semble qu'un conteneur flexible défini sur inline-flexne reconnaisse pas flex-basisun enfant lors du rendu d'un frère avec white-space: nowrap(bien qu'il puisse s'agir simplement d'un élément avec une largeur non définie). Le conteneur ne se dilate pas pour accueillir les articles.

Mais lorsque la widthpropriété 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:

• la largeur du conteneur flexible en ligne n'augmente pas
• Inline flex container (display: inline-flex) étend la pleine largeur du conteneur parent

Exemple:

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

flex-basis(et flex-grow) ne fonctionne pas sur l'élément de table

Références:

• Pourquoi la flex-box fonctionne-t-elle avec un div, mais pas avec une table?
• Pourquoi Flex-Grow ne fonctionne-t-il pas: 1 fonctionne pour une table dans Safari? (et Edge)

flex-basiséchoue dans Chrome et Firefox lorsque le conteneur de grand-parent est un élément rétractable. La configuration fonctionne correctement dans Edge.

• Conteneur positionné de manière absolue sans élargir la largeur pour s'adapter au contenu de la boîte flexible

Comme dans l'exemple présenté dans le lien ci-dessus, impliquant position: absolute, l'utilisation de floatet inline-block, rendra également la même sortie défectueuse ( démo jsfiddle ).

Bogues affectant IE 10 et 11:

• flexles déclarations abrégées avec des flex-basisvaleurs sans unité sont ignorées
• flex-basis ne tient pas compte box-sizing: border-box
• flex-basis ne prend pas en charge calc()
• L'importance est ignorée flex-basislors de l'utilisation de la flexsténographie

En plus de l'excellent résumé de Michael_B, il vaut la peine de le répéter:

flex-based vous permet de spécifier la taille initiale / de départ de l'élément, avant tout autre calcul. Il peut s'agir d'un pourcentage ou d'une valeur absolue.

La partie importante ici est initiale .

En soi, cela se résout en largeur / hauteur jusqu'à ce que les autres propriétés de croissance / rétraction flexibles entrent en jeu.

Alors. un enfant avec

.child {
 flex-basis:25%;
 flex-grow:1;
}

sera de 25% de large au départ, mais ensuite se dilater immédiatement autant que possible jusqu'à ce que les autres éléments soient pris en compte. S'il n'y en a pas, il sera de 100% large / haut.

Une démo rapide:

.flex {
  width: 80%;
  margin: 1em auto;
  height: 25px;
  display: flex;
  background: rebeccapurple;
}
.child {
  flex-basis: auto;
  /* default */
  background: plum;
}
.value {
  flex-basis: 25%;
}
.grow {
  flex-grow: 1;
}

<div class="flex">
  <div class="child auto">Some Content</div>
</div>
<div class="flex">
  <div class="child value">Some Content</div>
</div>
<div class="flex">
  <div class="child grow">Some Content</div>
</div>

Expérimenter avec le flex-grow, flex-shrinket flex-basis (ou le raccourci flex :fg fs fb) ... peut conduire à des résultats intéressants.

Peut-être le point le plus important à ajouter:

Et si le navigateur ne prend pas en charge flex? Dans un tel cas, width/heightprenez le relais et leurs valeurs s'appliquent.

C'est une très bonne idée - presque essentielle - de définir des width/heightéléments, même si vous avez alors une valeur complètement différente pour flex-basis. N'oubliez pas de tester en désactivant display:flexet en voyant ce que vous obtenez.