Flex-basis

La propriété flex-basis est une sous-propriété du module Flexible Box Layout (Flexbox). Elle spécifie la dimension initiale de l'item flex, avant qu'un éventuel espace disponible soit distribué selon les facteurs flex. Lorsqu'elle est omise dans le raccourci flex, elle a pour valeur par défaut 0.

Une valeur de flex-basis de auto dimensionne l'élément selon sa propriété de dimension (qui peut elle-même être auto, ce qui dimensionne l'élément en fonction de son contenu).

Syntaxe

//CSS
flex-basis: <width>

.flex-item {
  flex-basis: 100px;
}

Notez que, comme pour toute largeur, les valeurs négatives sont invalides.

Démo

See the Pen qdobWe by Pierre Choffe (@pierrechoffe) on CodePen.


Exemples d’utilisation dans La Cascade :

Layout sur 12 colonnes avec Flexbox, par Landon Schropp
Guide de Flexbox : n'oubliez pas flex-shrink.

Autres ressources à consulter sur ce sujet :


Cet article est pour l’essentiel tiré de l’almanach de CSS-Tricks de Chris Coyier, avec son aimable autorisation.

Sur l’auteur : est designer, blogger, conférencier. Créateur de CSS-Tricks, de CodePen, animateur du Podcast Shop Talk, il est l’auteur avec Jeff Starr de "Digging into WordPress". Vous pouvez le retrouver sur Twitter, Google+.

NdT : CSS-Tricks est un site ressource d’une richesse exceptionnelle, axé sur CSS et le web design en général. Vous pouvez suivre son actualité sur Twitter, Facebook, YouTube, GitHub. Mélange d’articles, de vidéos, de forums, de ressources diverses (jetez un coup d'oeil à son "Almanac" ), il est très populaire sur le web anglophone.

CodePen est un site où vous pouvez tester votre code, faire des maquettes, proposer vos dernières créations et recueillir les observations de vos pairs. C’est aussi une source d'inspiration pour vos propres designs.