Boîtes flexibles

propriétés gérées:
flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content, order, align-self, flex, flex-grow, flex-shrink, flex-basis

Les boîtes flexibles, associées à des requêtes @media, permettent d'adapter la présentation d'un site à toutes sortes de medias :

case à cocher raccourci

Cette option permet de générer les propriétés raccourcies flex-flow et flex plus compactes.

Distribution et alignements

flex-direction

définit l'axe de placement des items dans une flexbox : ligne ou colonne avec ordre éventuellement inversé.
column|column-reverse|row|row-reverse

flex-wrap

indique si une série d'item peut passer sur une ligne suivante ou pas.
wrap|nowrap|wrap-reverse

justify-content

alignement horizontal des items flexibles.
center|flex-start|flex-end|space-around|space-between

align-items

alignement vertical des items flexibles.
center|flex-start|flex-end|stretch|baseline

Ordre et flexibilité

order

spécifie l'ordre dans lequel les items sont dessinées dans la flexbox; à défaut l'ordre est celui du source html. Nombre entier positif.

flex-grow

nombre positif correspondant au facteur de grossissement utilisé. Plus la valeur est élevée, plus l'élément sera étendu si nécessaire.
Valeur par défaut : 0

flex-shrink

nombre positif correspondant au facteur de rétrécissement utilisé. Plus la valeur est élevée, plus l'élément sera compressé si nécessaire.
Valeur par défaut : 1. Valeurs globales : inherit | initial | unset

flex-basis

Effacer

Cliquez le bouton Effacer ❌ pour effacer les réglages présents.

Exemple de bloc flexible

Réduisez la largeur de fenêtre pour observer le résultat :

Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.

Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur ?

Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur ?