Base Flex

La flex-basispropriété définit la taille du le flex-itemlong de l'axe principal du conteneur flexible. L'axe principal est horizontal si flex-directionest défini sur rowet il sera vertical si la flex-directionpropriété est définie sur column.

Syntaxe

flex-basis: auto | content |  | ;

flex-base: auto

flex-basis: autorecherche la taille principale de l'élément et définit la taille. Par exemple, sur un conteneur flexible horizontal, autorecherchera widthet heightsi l'axe du conteneur est vertical.

Si aucune taille n'est spécifiée, autoreviendra à content.

flex-base: contenu

flex-basis: contentrésout la taille en fonction du contenu de l'élément, sauf si widthou heightest défini via normal box-sizing.

Dans les deux cas où flex-basisest soit autoou content, si la taille principale est spécifiée, cette taille sera prioritaire.

base flexible:

Ceci est tout aussi précis que widthou height, mais seulement plus flexible. flex-basis: 20em;définira la taille initiale de l'élément sur 20em. Sa taille finale sera basée sur l'espace disponible, flex-growmultiple et flex-shrinkmultiple.

La spécification suggère l'utilisation de la flexpropriété abrégée. Cela aide à écrire flex-basisavec flex-growet flex-shrinkpropriétés.

Exemples

Voici des rangées de conteneurs flex individuels et d'éléments flex individuels montrant comment flex-basisaffecte le box-sizing.

Lorsque le flex-directionest column, le même flex-basiscontrôle la heightpropriété. Vous pouvez le voir dans l'exemple ci-dessous:

Plus d'information:

Vous pouvez financer des références supplémentaires sur la propriété de base flexible sur les pages suivantes:

• Spécification CSS niveau 1
• Page Mozilla Developer Network sur une base flexible

Plus d'informations sur Flexbox:

• Conseils et astuces CSS Flexbox
• Flexbox - la feuille de triche ultime