DEVENIR-WEBMASTER.COM Log In
 26
Faire le quizz link W3C close

Apprendre à utiliser les Flexbox.

Visiter ma chaine Youtube

# Qu'est ce qu'une Flexbox ? close

flex-terminology

Une Flexbox c'est une boîte conteneur le flex container qui contient d'autres boîtes les flex items. La spécificité ici réside dans le fait que le programmeur va avoir un contrôle quasi total sur la répartition des flex items dans le flex container.

Le fait d'avoir un contrôle total entraine une certaine complexité avec un nombre important de propriétés et de valeurs différentes.

La répartition des flex items se fait selon deux axes : l'axe principal et l'axe secondaire. Par défaut l'axe principal est horizontal et la distribution des flex items se fait de la gauche vers la droite. L'axe secondaire est toujours à angle droit avec l'axe principal et la distribution se fait du haut vers le bas. On retrouve ici le sens de l'écriture du texte sur une page écrite par exemple en français.

Suivant les valeurs de la propriété flex-direction l'axe principal se trouve orienté de cette manière.

flex-direction
flex-direction:row
row
flex-direction:row-reverse
row-reverse
flex-direction:column
column
flex-direction:column-reverse
column-reverse

# Exemple de flexbox ? close

Pour faire cet exemple de Flexbox :

  1. Pour les flex items vous prenez deux div et vous les remplissez avec un peu de texte.
  2. Pour le flex container vous prenez un div et vous encapsulez les deux flex items.
  3. Vous écrivez une règle CSS avec la propriété CSS display à la valeur flex.

Vous avez une structure à deux colonnes.

Deux colonnes avec Flexbox

On a vu que l'on pouvait facilement passer d'une répartition en ligne à une répartition en colonne. Ici c'est ce que l'on fait en ajoutant une media query. L'intérêt est évident pour gérer les contraintes du responsive.

# Propriétés CSS du flex container close

La propriété justify-content

Cette propriété gère la répartition des boîtes selon l'axe principal de la boîte conteneur.

justify-content:flex-start
flex-start
justify-content:flex-end
flex-end
justify-content:center
center
justify-content:space-around
space-around
justify-content:space-between
space-between
justify-content:space-evenly
space-evenly

Un exemple d'utilisation de cette propriété

  1. On récupère l'exemple précédent.
  2. Pour les flex items on prend notre menu et on place chaque choix possible dans un div
  3. On espace uniformément nos flex items en utilisant la valeur evenly de justify-content.

On a de manière quasi immédiate notre menu responsive

La propriété align-items

Cette propriété gère l'alignement des flex items selon l'axe secondaire du flex container. Nous allons devoir donner une hauteur à notre flex container pour qu'un alignement puisse être calculé.

align-items:stretch
stretch
align-items:flex-start
flex-start
align-items:flex-end
flex-end
align-items:center
center
align-items:baseline
baseline

La propriété flex-wrap

Que se passe-t-il si on réduit la taille du flex container ? C'est la propriété flex-wrap qui permet de gérer cette situation.

Si flex-wrap vaut nowrap et que les flex items sont dans leur configuration par défaut alors les flex items seront rétrécis si le flex container est suffisamment rétréci.

flex-wrap:nowrap
nowrap

Si flex-wrap vaut wrap alors les flex items seront répartis sur une nouvelle ligne si le flex container est suffisamment rétréci.

flex-wrap:wrap
wrap

Lorsque les flex items sont répartis sur plusieurs lignes c'est la propriété align-content qui gère cette répartition. Ça veut dire que vous avez deux possibilités de répartition des flex items sur l'axe secondaire.

Un première possibilité gérée par align-items lorsqu'il n'y a qu'une seule ligne de flex items.

Une deuxième possibilité gérée par align-content lorsqu'il y a plus d'une ligne de flex items.

Je donne un exemple ici qui exploite ces possibilités.

La propriété align-content

align-content:flex-start
flex-start
align-content:flex-end
flex-end
align-content:center
center
align-content:stretch
stretch
align-content:space-between
space-between
align-content:space-around
space-around
align-content:space-evenly
space-evenly

La propriété raccourcie flex-flow

C'est un raccourci qui combine dans l'ordre les valeurs de flex-direction et de flex-wrap

# Propriétés CSS des flex items close

La propriété order

Par défaut l'ordre d'apparition des flex items correspond à l'ordre de leur apparition dans le code HTML. Toutefois cet ordre peut être géré manuellement à l'aide de la propriété order

order
order

La propriété flex-grow

Permet d'augmenter la taille de certains éléments si la place dans le conteneur le permet.

Dans notre exemple et dans l'ordre les valeurs de flex-grow sont de 1 3 1 ce qui fait que le deuxième élément sera 3 fois plus large que ses voisins.

flex-grow
flex-grow

La propriété flex-shrink

Permet de diminuer la taille de certains éléments si la place dans le conteneur est insuffisante.

Dans notre exemple et dans l'ordre les valeurs de flex-shrink sont de 1 3 1 ce qui fait que le deuxième élément sera 3 fois moins large que ses voisins.

flex-shrink
flex-shrink

La propriété flex-basis

Il faut voir la valeur de flex-basis comme une valeur de base. En fait c'est la valeur qu'auraient les flex items si ils n'étaient pas sous le contrôle du flex container, le flex container qui va les rétrécir ou les grandir selon les contraintes de flexbilité (flex-grow / flex-shrink / taille du flex container).

Si aucune valeur n'est précisée pour flex-basis (auto par défaut) les flex items auront la taille spécifiée dans width ou height.

Comme pour un div width et height sont soumis aux contraintes liées aux valeurs de min-width / max-width et min-height / max-height.

En l'absence de width / height et des contraintes que je viens de citer, les flex items prendront la taille de leur contenu.

Il faut remarquer que la propriété flex-basis correspond à la largeur ou à la hauteur des flex items selon la valeur de flex-direction.

Dans cet exemple la valeur de flex-basis en pixels correspond à la largeur des flex items car flex-direction vaut row (ou row-reverse).

Dans cet exemple la valeur de flex-basis en pixels correspond à la hauteur des flex items car flex-direction vaut column (ou column-reverse).

La taille des flex items sera bornée par les valeurs min-width / max-width ou min-height / max-height.

Dans cet exemple la valeur de flex-basis en pixels vaut au maximum max-width.

Dans cet exemple la valeur de flex-basis en pixels vaut au minimum min-width.

Dans cet exemple une taille est spécifiée à la fois sur flex-basis et sur width et c'est celle du flex-basis qui est prise.

La propriété raccourcie flex

C'est un raccourci qui combine dans l'ordre les valeurs de flex-grow, flex-shrink, flex-basis

J'attire votre attention sur le fait que l'utilisation d'un flex:3; va impliquer une valeur de flex-basis de 0. Ce n'est pas équivalent à un flex-grow:3; en laissant flex-basis à sa valeur par défaut qui est auto. L'utilisation de l'espace disponible ne sera pas identique dans les deux cas. La spécification contient des précisions sur ces particularités.