© Proxym-IT 
http://twitter.com/proxymit 
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia 
Phone : +216 73 82 12 22 /...
© Proxym-IT 
http://twitter.com/proxymit 
Le module «Flexbox» du CSS3 
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisi...
© Proxym-IT 
http://twitter.com/proxymit 
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia 
Phone : +216 73 82 12 22 /...
© Proxym-IT 
http://twitter.com/proxymit 
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia 
Phone : +216 73 82 12 22 /...
© Proxym-IT 
http://twitter.com/proxymit 
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia 
Phone : +216 73 82 12 22 /...
© Proxym-IT 
http://twitter.com/proxymit 
justify-content: flex-start | flex-end | center | space-between | space-around ;...
© Proxym-IT 
http://twitter.com/proxymit 
align-items: flex-start | flex-end | center | baseline | stretch ; 
• align-item...
© Proxym-IT 
http://twitter.com/proxymit 
align-content: flex-start | flex-end | center | space-between | space-around | s...
© Proxym-IT 
http://twitter.com/proxymit 
• Passons maintenant aux propriétés qui 
s'appliquent aux éléments enfants, les ...
© Proxym-IT 
http://twitter.com/proxymit 
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia 
Phone : +216 73 82 12 22 /...
© Proxym-IT 
http://twitter.com/proxymit 
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia 
Phone : +216 73 82 12 22 /...
© Proxym-IT 
http://twitter.com/proxymit 
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia 
Phone : +216 73 82 12 22 /...
© Proxym-IT 
http://twitter.com/proxymit 
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia 
Phone : +216 73 82 12 22 /...
© Proxym-IT 
http://twitter.com/proxymit 
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia 
Phone : +216 73 82 12 22 /...
© Proxym-IT 
http://twitter.com/proxymit 
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia 
Phone : +216 73 82 12 22 /...
© Proxym-IT 
http://twitter.com/proxymit 
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia 
Phone : +216 73 82 12 22 /...
Prochain SlideShare
Chargement dans…5
×

Le module Flex box layout du CSS3

163 vues

Publié le

Le FlexBox module du CSS CSS3 est un mode de mise en page qui va nous changer notre manière de mise page en CSS.

Publié dans : Logiciels
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
163
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • 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.
  • Le module Flex box layout du CSS3

    1. 1. © 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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+
    16. 16. © 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

    ×