Le module Flex Layout du CSS3

© Proxym-IT
http://twitter.com/proxymit
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
Préparer et animer par Mahmoud N’bet

© Proxym-IT
Le module «Flexbox» du CSS3
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
• « Flexbox Layout » est un nouvel ensemble de
propriétés CSS qui fournit une façon plus efficace pour la
mise en page d'une série d'éléments au sein d'un
élément parent, et plus précisément de :
– mettre en place plusieurs éléments sur une ligne sans avoir
à se soucier de la largeur de chacun d'eux ;
– modifier rapidement le sens de lecture vertical/horizontal ;
– aligner les éléments à gauche, à droite ou au centre du
parent ;
– modifier l'ordre d'affichage des différents éléments ;
– déployer les éléments dans le parent sans problème pour
gérer les marges ou la taille des éléments.

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Les bases
• flex container : l’élément parent
• flex item : les éléments enfants
• main axis / cross axis : Les axes principaux d'un container flex.
• main-start / main-end / cross-start / cross-end : À l'intérieur du container, les
items flex sont placés entre un point de départ et un point d'arrivée.
• main size / cross-size : La taille d'un item flex qui se trouve dans l'axe
principal, qu'il s'agisse de la hauteur ou de la largeur, est la taille principale
(main size ou cross-size). La propriété main size est soit "width", soit "height",
selon l'orientation.

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Les bases
Les items seront disposés soit sur l'axe principal (main axis)
depuis main-start ou main-end, ou sur l'axe perpendiculaire
(cross axis) en partant de cross-start ou de cross-end.
Avec un contrôle aussi sur l'alignement des items lorsqu'ils
débordent. <div class="parent">
<div class"child"></div>
</div>
Notez que :
• les propriétés « columns- » du module multi-colonnes n'ont pas d'effet sur un container flex
• les propriétés « float », « clear » et « vertical-align » n'ont pas d'effet sur un item flex.

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Les Propriétés
Commençons par les propriétés qui s'appliquent à l'élément parent « le
container ». En définissant le contexte général d'affichage.
display: flex | inline-flex;
- display : définit le contexte général d'affichage.
flex-direction: row | row-reverse | column | column-reverse;
- flex-direction : établit l'axe principal.
flex-wrap: nowrap | wrap | wrap-reverse ;
- flex-wrap : définit si le container comprend une seule ligne ou plusieurs.
flex-flow: <flex-direction> || <flex-wrap> ;
- flex-flow : est un raccourci des propriétés "flex-direction" et "flex-wrap"
qui ensemble définissent les axes "main" et "cross" du container
flex. La valeur par défaut est row nowrap.

© Proxym-IT
justify-content: flex-start | flex-end | center | space-between | space-around ;
• justify-content : définit l'alignement le long de l'axe principal. Elle
permet de distribuer l'espace excédentaire lorsque tous les items
flex sur une ligne sont inflexibles ou lorsqu'ils ont atteint leur
taille maximale. Elle contrôle aussi l'alignement des items
lorsqu'ils débordent.
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
.flexContainer{
display: flex;
flex-direction: row ;
flex-wrap: nowrap ;
justify-content: … ;
}
flex-start
flex-end
center
space-between
space-around

© Proxym-IT
align-items: flex-start | flex-end | center | baseline | stretch ;
• align-items : Cette propriété définit comment par défaut les
items d'une ligne sont disposés le long de l'axe "cross". On
peut le voir comme la version de justify-content pour "cross
axis".
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
.flexContainer{
display: flex;
flex-direction: row ;
flex-wrap: nowrap ;
align-items : … ;
}
flex-start
flex-end
center
stretch baseline

© Proxym-IT
align-content: flex-start | flex-end | center | space-between | space-around | stretch ;
• align-content : Cette propriété aligne les lignes d'un
container flex à l'intérieur de l'espace où il reste de
l'espace sur l'axe cross.
Note : cette propriété n'a pas d'effet quand la
flexbox n'a qu'une seule ligne.
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
flex-start
flex-end
Stretch (default)
center
space-between
space-around

© Proxym-IT
• Passons maintenant aux propriétés qui
s'appliquent aux éléments enfants, les items flex.
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
order
oreder : Par défaut, les items flex sont disposés par
ordre d'arrivée. Cependant, la propriété « order »
permet de contrôler l'ordre dans lequel ils
apparaissent dans le container.
order: <nombre entier>

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
flex-grow
• Cette propriété définit la possibilité pour un
item de grandir, si nécessaire.
flex-grow: <nombre entier> (par défaut = 0)
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..

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
flex-shrink
• Cette propriété définit la possibilité pour un
item flex de comprimer si nécessaire.
flex-shrink: <nombre entier> (par défaut = 1)
flex-basis
• Cette propriété définit la taille par défaut d'un
élément avant que l'espace restant soit réparti.
flex-basis: <longueur> | auto (par défaut = auto)

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
flex
• Cette propriété est le raccourci de flex-grow , flex-shrink
et flex-basis . Les deuxième et troisième paramètres sont
optionnels. La valeur par défaut est 0 1 auto.
flex: none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]
align-self
• Cette propriété permet à des items flex de passer outre
aux alignement par défaut ou à ceux spécifiés par align-items.
Les valeurs sont les mêmes que pour ce dernier.
align-self: auto | flex-start | flex-end | center | baseline | stretch ;

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Exemples
• Commençons avec un exemple
extrêmement simple, qui résout un
problème que nous recontrons tous
les jours : le centrage parfait.
.container{
display: flex;
height: 300px;
}
.child {
width: 100px;
height: 100px;
margin: auto;
}
margin: 0 auto
margin: auto auto

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Exemple
• Supposons que nous ayons une barre de navigation alignée en
haut à droite de notre page, mais nous souhaiterions qu'elle
soit centrée pour les écrans de taille moyenne et sur une
colonne pour des petits écrans.
.navigation {
@media all and (max-width: 800px) {
.navigation {
justify-content: space-around;
}
}
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
}
@media all and (max-width: 600px) {
.navigation {
flex-flow: column wrap;
}
}

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Historique et Compatibilité
CHROME FF SAFARI IE OPERA IOS ANDROID
FlexBox YES 28+ 7+
Prefixed
10+
Prefixed
YES 7.0+
Prefixed
4.4+

Le module Flex Layout du CSS3

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (7)

Le module Flex Layout du CSS3

Hinweis der Redaktion