Un guide complet de Flexbox - Astuces CSS

Fond

Le Flexbox Layoutmodule (Flexible Box) (une recommandation candidate du W3C à partir d'octobre 2017) vise à fournir un moyen plus efficace de disposer, d'aligner et de répartir l'espace entre les éléments d'un conteneur, même lorsque leur taille est inconnue et / ou dynamique (donc le mot «flex»).

L'idée principale derrière la disposition flexible est de donner au conteneur la possibilité de modifier la largeur / hauteur (et l'ordre) de ses éléments pour remplir au mieux l'espace disponible (principalement pour s'adapter à tous les types de dispositifs d'affichage et de tailles d'écran). Un conteneur flexible étend les éléments pour remplir l'espace libre disponible ou les réduit pour éviter tout débordement.

Plus important encore, la mise en page de la flexbox est indépendante de la direction par opposition aux mises en page régulières (bloc basé verticalement et en ligne qui est basé horizontalement). Bien que ceux-ci fonctionnent bien pour les pages, ils manquent de flexibilité (sans jeu de mots) pour prendre en charge des applications volumineuses ou complexes (en particulier en ce qui concerne le changement d'orientation, le redimensionnement, l'étirement, la réduction, etc.).

Remarque: La mise en page Flexbox est la plus appropriée aux composants d'une application et aux mises en page à petite échelle, tandis que la mise en page Grille est destinée aux mises en page à plus grande échelle.

Bases et terminologie

Étant donné que flexbox est un module entier et non une propriété unique, il implique beaucoup de choses, y compris l'ensemble de ses propriétés. Certains d'entre eux sont destinés à être définis sur le conteneur (élément parent, connu sous le nom de «conteneur flex») tandis que les autres sont destinés à être définis sur les enfants (dits «éléments flexibles»).

Si la disposition «régulière» est basée à la fois sur les directions de flux en bloc et en ligne, la disposition flexible est basée sur les «directions de flux flexibles». Veuillez regarder cette figure de la spécification, expliquant l'idée principale derrière la disposition flex.

Les articles seront disposés suivant soit la main axis(de main-startla main-end) ou l'axe transversal (de cross-startla cross-end).

axe principal - L'axe principal d'un conteneur flexible est l'axe principal le long duquel les éléments flexibles sont disposés. Attention, ce n'est pas forcément horizontal; cela dépend de la flex-directionpropriété (voir ci-dessous).
main-start | main-end - Les éléments flex sont placés dans le conteneur en commençant par main-start et en allant à main-end.
taille principale - La largeur ou la hauteur d'un élément flexible, selon la dimension principale, est la taille principale de l'élément. La propriété de taille principale de l'élément flexible est la propriété 'width' ou 'height', selon la propriété de la dimension principale.
axe transversal - L'axe perpendiculaire à l'axe principal est appelé axe transversal. Sa direction dépend de la direction de l'axe principal.
départ croisé | cross-end - Les lignes flex sont remplies d'articles et placées dans le conteneur en commençant du côté de départ transversal du conteneur flex et en allant vers le côté cross-end.
taille croisée - La largeur ou la hauteur d'un élément flexible, quelle que soit la dimension croisée, correspond à la taille croisée de l'élément. La propriété de taille croisée est celle de la «largeur» ou de la «hauteur» qui se trouve dans la dimension croisée.

Obtenez l'affiche!

Vous vous référez beaucoup à ce guide? Épinglez une copie sur le mur du bureau.

Acheter une affiche

Propriétés du parent
(conteneur flexible)

affichage

Ceci définit un conteneur flexible; inline ou block selon la valeur donnée. Il permet un contexte flexible pour tous ses enfants directs.

.container ( display: flex; /* or inline-flex */ )

Notez que les colonnes CSS n'ont aucun effet sur un conteneur flex.

flex-direction

Cela établit l'axe principal, définissant ainsi la direction dans laquelle les éléments flexibles sont placés dans le conteneur flexible. Flexbox est (à part l'emballage optionnel) un concept de disposition unidirectionnel. Pensez aux éléments flexibles comme étant principalement disposés en lignes horizontales ou en colonnes verticales.

.container ( flex-direction: row | row-reverse | column | column-reverse; )

row(par défaut): de gauche à droite dans ltr; de droite à gauche dansrtl
row-reverse: de droite à gauche dans ltr; de gauche à droite dansrtl
column: identique rowmais de haut en bas
column-reverse: identique row-reversemais de bas en haut

flex-wrap

Par défaut, les éléments flexibles essaieront tous de tenir sur une seule ligne. Vous pouvez modifier cela et autoriser les éléments à être enveloppés selon vos besoins avec cette propriété.

.container ( flex-wrap: nowrap | wrap | wrap-reverse; )

nowrap (par défaut): tous les éléments flexibles seront sur une seule ligne
wrap: les éléments flex seront enroulés sur plusieurs lignes, de haut en bas.
wrap-reverse: les éléments flex seront enroulés sur plusieurs lignes de bas en haut.

Il y a quelques démos visuelles d' flex-wrapici.

flex-flow

Il s'agit d'un raccourci pour les propriétés flex-directionet flex-wrap, qui définissent ensemble les axes principal et transversal du conteneur flexible. La valeur par défaut est row nowrap.

.container ( flex-flow: column wrap; )

justifier le contenu

Ceci définit l'alignement le long de l'axe principal. Il aide à répartir l'espace libre supplémentaire restant lorsque tous les éléments flexibles d'une ligne sont rigides ou flexibles mais ont atteint leur taille maximale. Il exerce également un certain contrôle sur l'alignement des éléments lorsqu'ils dépassent la ligne.

.container ( justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right… + safe | unsafe; )

flex-start (par défaut): les éléments sont emballés vers le début de la direction flex.
flex-end: les articles sont emballés vers la fin de la direction de flexion.
start: les articles sont emballés vers le début de la writing-modedirection.
end: les articles sont emballés vers la fin de la writing-modedirection.
left: les articles sont emballés vers le bord gauche du conteneur, sauf si cela n'a pas de sens avec le flex-direction, alors il se comporte comme start.
right: les articles sont emballés vers le bord droit du conteneur, sauf si cela n'a pas de sens avec le flex-direction, alors il se comporte comme end.
center: les éléments sont centrés le long de la ligne
space-between: les articles sont uniformément répartis dans la ligne; le premier élément est sur la ligne de départ, le dernier élément sur la ligne de fin
space-around: les éléments sont répartis uniformément dans la ligne avec un espace égal autour d'eux. Notez que visuellement, les espaces ne sont pas égaux, car tous les éléments ont un espace égal des deux côtés. Le premier élément aura une unité d'espace contre le bord du conteneur, mais deux unités d'espace entre l'élément suivant car cet élément suivant a son propre espacement qui s'applique.
space-evenly: les éléments sont répartis de manière à ce que l'espacement entre deux éléments (et l'espace sur les bords) soit égal.

Notez que la prise en charge de ces valeurs par le navigateur est nuancée. Par exemple, space-betweencertaines versions d'Edge n'ont jamais été prises en charge et start / end / left / right ne sont pas encore dans Chrome. MDN a des graphiques détaillés. Les valeurs les plus sûres flex-start, flex-endet center.

Il existe également deux mots clés supplémentaires que vous pouvez associer à ces valeurs: safeet unsafe. L'utilisation safegarantit que, quelle que soit la manière dont vous effectuez ce type de positionnement, vous ne pouvez pas pousser un élément de manière à ce qu'il s'affiche hors de l'écran (par exemple, hors du haut) de telle sorte que le contenu ne puisse pas également faire défiler (appelé «perte de données») .

align-items

Cela définit le comportement par défaut de la disposition des éléments flexibles le long de l' axe transversal sur la ligne courante. Considérez-le comme la justify-contentversion de l'axe transversal (perpendiculaire à l'axe principal).

.container ( align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end +… safe | unsafe; )

stretch (par défaut): étirer pour remplir le conteneur (toujours respecter min-width / max-width)
flex-start/ start/ self-start: les éléments sont placés au début de l'axe transversal. La différence entre ceux-ci est subtile et concerne le respect des flex-directionrègles ou des writing-moderègles.
flex-end/ end/ self-end: les éléments sont placés à la fin de l'axe transversal. La différence est encore subtile et concerne le respect des flex-directionrègles par rapport aux writing-moderègles.
center: les éléments sont centrés sur l'axe transversal
baseline: les éléments sont alignés tels que leurs lignes de base s'alignent

Les mots-clés safeet de unsafemodificateur peuvent être utilisés en conjonction avec tous les autres mots-clés (bien que le navigateur soit pris en charge), et visent à vous aider à empêcher l'alignement des éléments de sorte que le contenu devient inaccessible.

align-content

Cela aligne les lignes d'un conteneur flexible à l'intérieur lorsqu'il y a un espace supplémentaire dans l'axe transversal, de la même manière que l' justify-contentalignement des éléments individuels dans l'axe principal.

Remarque: cette propriété prend effet uniquement sur les conteneurs flexibles multilignes, où flex-flowest défini sur wrapou wrap-reverse). Un conteneur flexible sur une seule ligne (c'est-à-dire où flex-flowest défini sur sa valeur par défaut no-wrap) ne reflétera pas align-content.

.container ( align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline +… safe | unsafe; )

normal (par défaut): les éléments sont emballés dans leur position par défaut comme si aucune valeur n'était définie.
flex-start/ start: articles emballés au début du conteneur. Le (plus soutenu) flex-starthonore le flex-directiontout en starthonore la writing-modedirection.
flex-end/ end: articles emballés jusqu'au bout du conteneur. Le (plus de soutien) flex-endhonore la flex-directionfin while honore la writing-modedirection.
center: éléments centrés dans le conteneur
space-between: articles uniformément répartis; la première ligne est au début du conteneur tandis que la dernière est à la fin
space-around: éléments répartis uniformément avec un espace égal autour de chaque ligne
space-evenly: les éléments sont répartis uniformément avec un espace égal autour d'eux
stretch: les lignes s'étirent pour occuper l'espace restant

Propriétés pour les enfants
(éléments flexibles)

ordre

Par défaut, les éléments flexibles sont disposés dans l'ordre source. Cependant, la orderpropriété contrôle l'ordre dans lequel ils apparaissent dans le conteneur flex.

.item ( order: 5; /* default is 0 */ )

Flex-Grow

This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.

If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least).

.item ( flex-grow: 4; /* default 0 */ )

Negative numbers are invalid.

flex-shrink

This defines the ability for a flex item to shrink if necessary.

.item ( flex-shrink: 3; /* default 1 */ )

Negative numbers are invalid.

flex-basis

This defines the default size of an element before the remaining space is distributed. It can be a length (e.g. 20%, 5rem, etc.) or a keyword. The auto keyword means “look at my width or height property” (which was temporarily done by the main-size keyword until deprecated). The content keyword means “size it based on the item’s content” - this keyword isn’t well supported yet, so it’s hard to test and harder to know what its brethren max-content, min-content, and fit-content do.

.item ( flex-basis: | auto; /* default auto */ )

If set to 0, the extra space around content isn’t factored in. If set to auto, the extra space is distributed based on its flex-grow value. See this graphic.

flex

This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. The default is 0 1 auto, but if you set it with a single number value, it’s like 1 0.

.item ( flex: none | ( ? || ) )

It is recommended that you use this shorthand property rather than set the individual properties. The shorthand sets the other values intelligently.

align-self

This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.

Please see the align-items explanation to understand the available values.

.item ( align-self: auto | flex-start | flex-end | center | baseline | stretch; )

Note that float, clear and vertical-align have no effect on a flex item.

Examples

Let’s start with a very very simple example, solving an almost daily problem: perfect centering. It couldn’t be any simpler if you use flexbox.

.parent ( display: flex; height: 300px; /* Or whatever */ ) .child ( width: 100px; /* Or whatever */ height: 100px; /* Or whatever */ margin: auto; /* Magic! */ )

This relies on the fact a margin set to auto in a flex container absorb extra space. So setting a vertical margin of auto will make the item perfectly centered in both axes.

Now let’s use some more properties. Consider a list of 6 items, all with fixed dimensions, but can be auto-sized. We want them to be evenly distributed on the horizontal axis so that when we resize the browser, everything scales nicely, and without media queries.

.flex-container ( /* We first create a flex layout context */ display: flex; /* Then we define the flow direction and if we allow the items to wrap * Remember this is the same as: * flex-direction: row; * flex-wrap: wrap; */ flex-flow: row wrap; /* Then we define how is distributed the remaining space */ justify-content: space-around; )

Done. Everything else is just some styling concern. Below is a pen featuring this example. Be sure to go to CodePen and try resizing your windows to see what happens.

Let’s try something else. Imagine we have a right-aligned navigation element on the very top of our website, but we want it to be centered on medium-sized screens and single-columned on small devices. Easy enough.

/* Large */ .navigation ( display: flex; flex-flow: row wrap; /* This aligns items to the end line on main-axis */ justify-content: flex-end; ) /* Medium screens */ @media all and (max-width: 800px) ( .navigation ( /* When on medium sized screens, we center it by evenly distributing empty space around items */ justify-content: space-around; ) ) /* Small screens */ @media all and (max-width: 500px) ( .navigation ( /* On small screens, we are no longer using row direction but column */ flex-direction: column; ) )

Let’s try something even better by playing with flex items flexibility! What about a mobile-first 3-columns layout with full-width header and footer. And independent from source order.

.wrapper ( display: flex; flex-flow: row wrap; ) /* We tell all items to be 100% width, via flex-basis */ .wrapper> * ( flex: 1 100%; ) /* We rely on source order for mobile-first approach * in this case: * 1. header * 2. article * 3. aside 1 * 4. aside 2 * 5. footer */ /* Medium screens */ @media all and (min-width: 600px) ( /* We tell both sidebars to share a row */ .aside ( flex: 1 auto; ) ) /* Large screens */ @media all and (min-width: 800px) ( /* We invert order of first sidebar and main * And tell the main element to take twice as much width as the other two sidebars */ .main ( flex: 2 0px; ) .aside-1 ( order: 1; ) .main ( order: 2; ) .aside-2 ( order: 3; ) .footer ( order: 4; ) )

Prefixing Flexbox

Flexbox requires some vendor prefixing to support the most browsers possible. It doesn’t just include prepending properties with the vendor prefix, but there are actually entirely different property and value names. This is because the Flexbox spec has changed over time, creating an “old”, “tweener”, and “new” versions.

Perhaps the best way to handle this is to write in the new (and final) syntax and run your CSS through Autoprefixer, which handles the fallbacks very well.

Alternatively, here’s a Sass @mixin to help with some of the prefixing, which also gives you an idea of what kind of things need to be done:

@mixin flexbox() ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; ) @mixin flex($values) ( -webkit-box-flex: $values; -moz-box-flex: $values; -webkit-flex: $values; -ms-flex: $values; flex: $values; ) @mixin order($val) ( -webkit-box-ordinal-group: $val; -moz-box-ordinal-group: $val; -ms-flex-order: $val; -webkit-order: $val; order: $val; ) .wrapper ( @include flexbox(); ) .item ( @include flex(1 200px); @include order(2); )

Related Properties

A Complete Guide to Grid
Almanac entries on Grid properties, like grid-row / grid-column

Other Resources

Flexbox in the CSS specifications
Flexbox at MDN
Flexbox at Opera
Diving into Flexbox by Bocoup
Mixing syntaxes for best browser support on CSS-Tricks
Flexbox by Raphael Goetter (FR)
Flexplorer by Bennett Feely

Bugs

Flexbox is certainly not without its bugs. The best collection of them I’ve seen is Philip Walton and Greg Whitworth’s Flexbugs. It’s an open-source place to track all of them, so I think it’s best to just link to that.

Prise en charge du navigateur

Découpé par «version» de flexbox:

(nouveau) signifie la syntaxe récente de la spécification (par exemple display: flex;)
(tweener) signifie une syntaxe non officielle étrange de 2011 (par exemple display: flexbox;)
(ancien) signifie l'ancienne syntaxe de 2009 (par exemple display: box;)

Chrome	Safari	Firefox	Opéra	C'EST À DIRE	Bord	Android	iOS
20- (ancien) 21+ (nouveau)	3.1+ (ancien) 6.1+ (nouveau)	2-21 (ancien) 22+ (nouveau)	12.1+ (nouveau)	10 (tweener) 11+ (nouveau)	17+ (nouveau)	2.1+ (ancien) 4.4+ (nouveau)	3.2+ (ancien) 7.1+ (nouveau)

Le navigateur Blackberry 10+ prend en charge la nouvelle syntaxe.