La notion de flexibilité constitue le fondement du module de positionnement Flexbox, et c'est là qu'intervient l'indispensable propriété flex.
La propriété flex est un raccourci de trois propriétés, flex-grow, flex-shrink et flex-basis, qui s'appliquent aux "flex-items".
Par défaut, les valeurs de ces propriétés sont : flex-grow: 0, flex-shrink: 1 et flex-basis: auto.
/* Par défaut */
.flex-item {
flex:0 1 auto;
}
Les fonctionnalités en détail :
- flex-grow : capacité pour un élément à s'étirer dans l'espace restant disponible.
La propriété flex-grow accepte une valeur sans unité qui sert de proportion.
Si tous les items ont flex-grow défini à 1, chaque enfant aura le "même espace" dans le container. Si vous donnez à l'un des enfants une valeur de 2, cet enfant prendra deux fois plus de place que les autres.
- flex-shrink : capacité pour un élément à se contracter si nécessaire.
Pour rendre un élément flexible, il suffit de lui attribuer une valeur de flex-grow supérieure à zéro.
Cet élément occupera alors l'espace restant au sein de son conteneur :
/* .item03 occupera l'espace restant */
.flexItem {
flex: 1; /* flex:1 1 0 */
}
Si chaque item est à flex:1 1 0;
Ils occupent chacun : 1 ÷ (1 + 1 + 1) soit 1/3 de l'espace total.
La valeur de flex-grow est proportionnelle, ce qui signifie qu'elle change en fonction des valeurs des autres flex-items.
Si le premier item a un flex-grow de 2, il prend la même quantité d'espace que les deux autres réunis.
La somme des valeurs est égale à 4, donc le premier item occupe 2 ÷ (2 + 1 + 1), c'est à dire 1/2
et les deux autres : 1 ÷ (2 + 1 + 1) soit 1/4.
/* .item03 occupera 2 fois plus d'espace */
.flex-item {
flex:1 1 0;
}
#item01 {
flex: 2 1 0;
}
- flex-basis : taille initiale de l'élément avant que l'espace restant ne soit distribué.
Une valeur de flex-basis : auto dimensionne l'élément selon sa propriété de dimension(width)
Exemple avec un premier item en taille initiale de 400px et des items frères dimensionnés avec un basis de 200px.
Le basis est utilisé ici pour donner une taille minimum aux blocs comme le ferait un min-width.
.flex-item {
flex:1 1 200px;
}
#item02 {
flex: 2 1 400px;
}
.flexG2 {
flex:2 1 3rem;
}
.flex-item {
flex: 1 1 0;
margin:0.5rem;
padding:0.5rem
}
Pour créer une grille justifiée, il peut être utile de mettre en place des classes telles que flexItem et flexG2 pour déterminer différentes valeurs de flex.
Le basis de .flexG2 prend une valeur qui est la somme des marges de deux blocs pour avoir un alignement parfait.
Flexbox ne prend pas en compte les marges dans son calcul des proportions, ce qui provoque un retour à la ligne.
propriété gap
Cette super propriété définit les espaces ( gouttières ) entre les lignes et les colonnes.
Cette propriété s'applique aux conteneurs multicolonnes, flexbox et grid.
Elle peut prendre 2 valeurs : row-gap et column-gap
Si une seule valeur est définie elle s'applique entre les flex-items(column) et les lignes(row)
div.flexContainer {
display: flex;
flex-flow: row wrap;
gap: 1rem;
}
div.flex-item {
flex: 1 1 50%;
background-color: orangered;
padding: 1rem;
background-clip: content-box;
}
flex-item 1
flex-item 2
flex-item 3
flex-item 4
