Le module Flex Layout du CSS31. © 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
2. © Proxym-IT
http://twitter.com/proxymit
Le module «Flexbox» du CSS3
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
• « 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.
3. © 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
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.
4. © 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
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 class"child"></div>
<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.
5. © 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
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.
6. © Proxym-IT
http://twitter.com/proxymit
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.
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
.flexContainer{
display: flex;
flex-direction: row ;
flex-wrap: nowrap ;
justify-content: … ;
}
flex-start
flex-end
center
space-between
space-around
7. © Proxym-IT
http://twitter.com/proxymit
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".
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
.flexContainer{
display: flex;
flex-direction: row ;
flex-wrap: nowrap ;
align-items : … ;
}
flex-start
flex-end
center
stretch baseline
8. © Proxym-IT
http://twitter.com/proxymit
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.
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
flex-start
flex-end
Stretch (default)
center
space-between
space-around
9. © Proxym-IT
http://twitter.com/proxymit
• Passons maintenant aux propriétés qui
s'appliquent aux éléments enfants, les items flex.
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
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>
10. © 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
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..
11. © 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
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)
12. © 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
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 ;
13. © 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
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
14. © 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
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;
}
}
15. © 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
Historique et Compatibilité
CHROME FF SAFARI IE OPERA IOS ANDROID
FlexBox YES 28+ 7+
Prefixed
10+
Prefixed
YES 7.0+
Prefixed
4.4+
Notes de l'éditeur http://la-cascade.ghost.io/flexbox-guide-complet/http://synbioz.developpez.com/tutoriels/css/mise-en-page-flexbox/http://www.inserthtml.com/2012/05/css3-flex-box-specification-change-layout-design/ Le module flexbox fontionne à l'intérieur de ce contexte. flex-start : l'item est placé au début de la ligne cross-start.
flex-end : la marge "cross-end" de l'item est placée sur la ligne cross-end
center : les items sont centrés sur l'axe cross
stretch (par défaut) : les items sont étirés jusqu'à remplir le container (tout en respectant min-width/max-width)
baseline : les items sont alignés sur leur ligne de base
flex-start : lignes regroupées au début du container
flex-end : lignes regroupées à la fin du container
center : lignes regroupées au centre du container
space-between : les lignes sont réparties, la première est collée du côté start, la dernière du côté end.
space-around : les lignes sont réparties avec un espacement égal autour de chacune.
stretch (par défaut) : les lignes s'étirent pour remplir tout l'espace.