Affichage Boîte flexible

Le concept de Boîte flexible apparait mais n'est pas encore complètement implanté dans tous les navigateurs.

Le principe général de Flexbox peut paraître assez déroutant de prime abord, mais finalement très pratique : il suffit de créer un "contexte de boîte flexible" sur un parent à l'aide de la propriété display afin qu'il soit appliqué à l'ensemble de ses enfants directs.

container : élément parent dans lequel sont contenus les items. Défini par display:flex ou display:inline-flex
item : chaque fils devient un item. Le texte directement inclus dans le container est traité comme un item anonyme.
axes : chaque boite possède 2 axes. L'axe principal est l'axe suivant lequel les items s'alignent, l'axe transverse est l'axe perpendiculaire au premier.
- flex-direction : établit l'axe principal (row ou column)
- justify-content : définit la façon dont les items se répartissent le long de l'axe principal sur la ligne courante
- align-items : définit la façon dont les items se répartissent le long de l'axe transverse sur la ligne courante
- align-self : définit cette façon pour un item et a priorité sur la définition précédente.
directions : Où commence le début du flot ? Au début de l'axe ou en fin (reverse).
- order : assigne un numéro d'ordre aux élément et détermine l'ordre d'apparition de ces éléments.
- flex-flow : raccourci pour flex-direction et flex wrap.
lignes : les items peuvent se répartir soit sur une seule ligne, soit sur plusieurs selon flex-wrap qui contrôle la direction de l'axe transverse et la direction d'empilement des lignes.
dimensions : désignation des tailles principales et transverses qui contrôlent les axes principal et transverse.
- min-height et min-width : valeur initiale à 0
- flex-grow, flex-shrink et flex-basis : établissent la flexibilité des items.

Display Flex

ul {display: flex ; border: medium groove ;}

li {list-style: none ; border: thin solid ;}

Orientation ( row ou column )

ul {display: flex ; flex-direction: column ;}

Accueil
Contact
Documentation
Liens
Soirées exceptionnelles du mois

Orientation ( row ou column ou row-reverse ou column-reverse )

ul {display: flex ; flex-direction: row-reverse ;}

Accueil
Contact
Documentation
Liens
Soirées exceptionnelles du mois

Enroulement ( nowrap ou wrap ou wrap-reverse )

ul {display: flex ; flex-wrap: nowrap }

Les cellules restent sur la même ligne quand la fenêtre rétrécit.

ul {display: flex ; flex-wrap: wrap }

Les cellules descendent quand la fenêtre rétrécit.

Accueil
Contact
Documentation
Liens
Soirées exceptionnelles du mois dans un cadre idyllique. Soirées exceptionnelles du mois dans un cadre idyllique.

ul {display: flex ; flex-wrap: wrap-reverse }

Les cellules montent quand la fenêtre rétrécit.

Accueil
Contact
Documentation
Liens
Soirées exceptionnelles du mois dans un cadre idyllique. Soirées exceptionnelles du mois dans un cadre idyllique.

Alignements horizontaux et verticaux

Alignements horizontaux des cellules

justify-content : flex-start (à gauche) | flex-end (à droite) | center (centré) | space-between (séparées par un espace) | space-around (séparées par un espace même en début et fin)

ul { border: medium groove ; display: flex ; justify-content: space-around ;}

Accueil
Contact
Documentation
Liens
Soirées exceptionnelles du mois

Alignements verticaux des cellules

align-items : flex-start (top) | flex-end (bottom) | center (middle) | baseline | stretch (hauteur identique pour toutes les cellules)

ul { border: medium groove ; display: flex ; justify-content: space-around ; align-items: flex-end ;}

Accueil
Contact
Documentation
Liens
Soirées exceptionnelles du mois dans un cadre idyllique
Soirées exceptionnelles du mois dans un cadre idyllique

ul { border: medium groove ; display: flex ; justify-content: space-between ; align-items: stretch ;}

Accueil
Contact
Documentation
Liens
Soirées exceptionnelles du mois dans un cadre idyllique
Soirées exceptionnelles du mois dans un cadre idyllique

Ordre

Il est possible de modifier l'ordre d'affichage logique (ordre d'apparition dans la page) via la propriété ordre.

L'Item ayant order: 1 sera affiché avant celui ayant order: 2...

Cette possibilité peut se révéler très utile pour ordonner la structure d'une page (section, nav, aside, article...) en fonction de la taille de la fenêtre.

sans ORDER

Post hanc adclinis Libano monti Phoenice, regio plena gratiarum et venustatis, urbibus decorata magnis et pulchris; in quibus amoenitate celebritateque nominum Tyros excellit, Sidon et Berytus isdemque pares Emissa et Damascus saeculis condita priscis.

Nisi mihi Phaedrum, inquam, tu mentitum aut Zenonem putas, quorum utrumque audivi, cum mihi nihil sane praeter sedulitatem probarent, omnes mihi Epicuri sententiae satis notae sunt. atque eos, quos nominavi, .

Incenderat autem audaces usque ad insaniam homines ad haec, quae nefariis egere conatibus, Luscus quidam curator urbis subito visus: eosque ut heiulans baiolorum praecentor ad expediendum quod orsi sunt incitans vocibus crebris. qui haut longe postea ideo vivus exustus est.

avec ORDER --- (2 - 3 - 1)

Le bloc bleu bien qu'en 1^ère position se retrouve en 2^ème position du fait de ORDER: 2, le jaune passe de la 2 à la 3 et le rouge devient numéro 1 et tout cela sans que le contenu de la page ait été modifié !

Propriété Flex

La notion de flexibilité constitue le fondement du module de positionnement Flexbox, et c'est là qu'intervient l'indispensable propriété flex.

La propriété flex est un raccourci de trois propriétés, flex-grow, flex-shrink et flex-basis, dont les fonctions sont :

flex-grow : propension pour un élément à s'étirer dans l'espace restant
flex-shrink : propension pour un élément à se contracter si besoin
flex-basis : taille initiale de l'élément avant que l'espace restant ne soit distribué

.truc { flex: 3 2 100px } :

si le container est trop grand, les cellules vont grandir et TRUC grandira 3 fois plus vite que les autres (à 1) ;
si le container est trop petit, les cellules vont se rétrécir et TRUC rétrécira 2 fois plus vite que les autres ;
100px est la taille minimum de TRUC.

État normal

li {list-style: none ; border: thin solid ;}

État étendu

li {list-style: none ; border: thin solid ; flex: 1 150px}

li:nth-child(2) { flex: 2 200px}

Les cellules ont chacune une taille minimum de 150px (flex-basis: 150px) et occupe tout l'espace (flex: 1).

La deuxième cellule (nth-child(2)) occupe le double de place (flex: 2) avec une taille minimum de 200px.

Accueil
Contact
Documentation
Liens
Soirées exceptionnelles du mois