CSS layouts et Flexbox

Flexbox

display: flex ^[1] ou "Flexbox" ou "Boîtes flexibles" est un outil de mise en page moderne permettant de disposer des boîtes sur une seule dimension.

RIP flex pour le layout de boîtes

Les mises en page moderne visent à remplacer les anciennes techniques de mise en page qui détournaient l’usage de la propriété float.

1. Les concepts de base pour flexbox

C’est quoi flexbox

Un modèle de mise en page sur 1 dimension (une seule ligne ou une seule colonne)

Un conteneur auquel on applique display:flex (ou display: inline-flex ^[1]) et des propriétés qui s’appliquent sur ses enfants directs.

<style>
.conteneur{
    display: flex;
    display: inline-flex;
}
.item{
    width: 5rem;
    height: 5rem;
}
</style>
<div class="conteneur">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 3</div>
</div>

1. Conteneur flex qui se comporte comme un élément en ligne

Axes

L’axe principal est défini par la propriété flex-direction qui peut prendre quatre valeurs :

row, row-reverse, column, column-reverse

Figure 1. row

Figure 2. row-reverse

Figure 3. column

Figure 4. column-reverse

Axes selon `flex-direction: row|row-reverse`

Figure 5. Axe principal

Figure 6. Axe transverse

Figure 7. flex-direction: row;

Figure 8. flex-direction: row-reverse;

Axes selon `flex-direction: column|column-reverse`

Figure 9. Axe principal

Figure 10. Axe transverse

Figure 11. flex-direction: column;

Figure 12. flex-direction: column-reverse;

Playground

CSS Flexbox Playground

Devtools

Les outils de développeurs disposent de petits utilitaires pour manipuler directement les différentes propriétés associées avec les boites flexibles.

Propriétés flexbox

La plupart des propriétés de flexbox s’appliquent au conteneur flex. Certaines d’entre-elles (*-self) s’appliquent sur les items.

Propriétés couramment utilisées en boîtes flexibles

Axe principal

justify-content
justify-items
justify-self

Axe secondaire

align-content
align-items
align-self

flex

flex-basis
flex-grow
flex-shrink

flex-flow

flex-direction
flex-wrap

gap

column-gap
row-gap

`justify-content` en direction `row`

Aligne les items le long de l’axe principal

Ici, quand flex-direction est row ou row-reverse

Example 1. flex-start ^[1]

css flex row justify content flex start defaut

Example 2. flex-end

Example 3. center

Example 4. space-between

css flex row justify content space between

Example 5. space-around

css flex row justify content space around

Example 6. space-evenly

css flex row justify content space evenly

1. flex-start est le comportement par défaut

`justify-content` en direction `column`

Aligne les items le long de l’axe principal

Ici, quand flex-direction est column ou column-reverse

Example 7. flex-start

css flex column justify content flex start defaut

Example 8. flex-end

css flex column justify content flex end

Example 9. center

Example 10. space-between

css flex column justify content space between

Example 11. space-around

css flex column justify content space around

Example 12. space-evenly

css flex column justify content space evenly

align-items

Distribue des items le long de l’axe transverse ^[1].

align-items: stretch;: ^[2] étire les items le long de l’axe transverse
align-items: center;: centré
align-items: flex-start;: au début

Par défaut, les éléments sont étirés. Ca signifie que si les items n’ont pas de hauteur max définie, ils vont occuper tout l’espace vertical

1. Rappel : l’axe transverse est perpendiculaire à l’axe principal

2. Valeur par défaut

flex-wrap

flex-flow

gap

align-content

justify-items

flex-basis

flex-grow

flex-shrink

flex

order

CSS Flexbox Review

Introduction to CSS Flexbox and Flex Model

Definition: CSS flexbox is a one-dimensional layout model that allows you to arrange elements in rows and columns within a container.
Flex Model: This model defines how flex items are arranged within a flex container. Every flex container has two axes: the main axis and the cross axis.

The `flex-direction` Property

Definition: This property sets the direction of the main axis. The default value of flex-direction is row, which places all the flex items on the same row, in the direction of your browser’s default language (left to right or right to left).
flex-direction: row-reverse;: This reverses the items in the row.
flex-direction: column;: This will align the flex items vertically instead of horizontally.
flex-direction: column-reverse;: This reverses the order of the flex items vertically.

The `flex-wrap` Property

Definition: This property determines how flex items are wrapped within a flex container to fit the available space. flex-wrap can take three possible values: nowrap, wrap, and wrap-reverse.
flex-wrap: nowrap;: This is the default value. Flex items won’t be wrapped onto a new line, even if their width exceed the container’s width.
flex-wrap: wrap;: This property will wrap the items when they exceed the width of their container.
flex-wrap: wrap-reverse;: This property will wrap flex items in reverse order.
flex-flow Property: This property is a shorthand property for flex-direction and flex-wrap.

flex-flow: column wrap-reverse;

Afficher plusieurs blocs en ligne
Centrer du contenu horizontalement ou verticalement

Usages avancés

Conteneurs imbriqués

Margin dans un conteneur flex

Applications

Motifs communs

Grille flexbox
Objets média (ex. image à gauche, texte à droite)
Mise en page de formulaires
Mise en page de site web
Mise en page réactive (responsive) avec media queries
Mise en page réactive (responsive) fluide (sans media queries)

Cas d’utilisations

Répartir le logo, titre, navigation, compte sur une entête de site
Gallerie photo
Cards

Quelques exemples communs avec du code

Quelques ressources