Table des matières Flexbox

Après "block" et "inline-block", voici l'attribut "flexbox".... la boîte flexible !

Les auteurs autorisés parle d'un "nouveau modèle de boîte" distinct,  “le Modèle de boîte flexible”. Le terme n'est pas tout à fait approprié, il ne s'agit pas de la boîte à proprement parlée mais de la disposition des sous-boîte à l'intérieur d'un conteneur.

L'attribut Flexbox est plutôt très bien reconnu par les navigateurs, sur les mobiles, et même sur les anciens navigateurs (voir  CaniUse.com).

Les anciennes versions d'Internet Explorer ne supportent pas cette spécification (inférieures à IE10). (Comme d'habitude, les administrations publiques seront handicapées par les retards de mise à jour de leurs navigateurs)

Entrons dans le vif du Sujet

I Architecture : un "flex-container" contenant des "flex-item"

Flexbox est une architecture constituée de :

Le "flex-container", se définit par un  display: flex; ou display: inline-flex;. Ses enfants deviennent alors automatiquement (rien à déclarer) des éléments de type "flex-item" :

<style type="text/css">
.container { display: flex;
}
.container>* { border : solid black 1px; margin: 0 1px;
}
</style>
Ingrédients (pour 4 personnes) :
<div class="container">
<span>200 g courgettes</span>
<span>3 oeufs</span>
<span>40 g mie de pain</span>
<span>15 cl lait</span>
<span>20 g beurre</span>
<span>60 g râpé</span>
<span>sel, poivre </span>
</div>
est rendu par :

Ingrédients (pour 4 personnes) :
200 g courgettes 3 oeufs 40 g mie de pain 15 cl lait 20 g beurre 60 g râpé sel, poivre

II Affichage horizontal ou vertical des "flex-item" :  flex-direction

Le sens d’affichage horizontal ou vertical des "flex-items" est définie par la propriété flex-direction. Les valeurs peuvent être :

Cette propriété s’applique au "flex-container" et détermine l’axe principal.

<style type="text/css">
.container2 {
display: flex;
flex-direction: column-reverse;
}
.container2>* {
border : solid black 1px;
margin: 1px;
width:150px;
}
</style>
Ingrédients (pour 4 personnes) :
<ol class="container2">
<li>200 g courgettes</li>
<li>3 oeufs</li>
<li>40 g mie de pain</li>
<li>15 cl lait</li>
<li>20 g beurre</li>
<li>60 g râpé</li>
<li>sel, poivre </li>
</ol>
est rendu par :

Ingrédients (pour 4 personnes) :
  1. 200 g courgettes
  2. 3 oeufs
  3. 40 g mie de pain
  4. 15 cl lait
  5. 20 g beurre
  6. 60 g râpé
  7. sel, poivre

III Aligner et centrer

Flexbox gére très finement les alignements grace à 2 attributs du flex-container :

1) justify-content : Aligner et centrer sur l'axe principal

5 valeurs possibles pour l'attribut justify-content

flex-start les éléments positionnés au début
du sens de lecture, valeur par défaut
flex-end éléments positionnés à la fin
center position centrale
space-between répartition "justifiée"
space-around variante de répartition "justifiée"

A noter que si on change la direction de l'axe principal en "column", cette répatition s'applique cette fois verticalement :

L'attribut flex-direction définit l'axe principal, l'autre axe perpendiculaire est alors l'axe secondaire :

(d'après https://la-cascade.io/flexbox-guide-complet/)

2) Sur l’axe secondaire, l'alignement est géré avec align-items

stretch étirés dans l'espace disponible, valeur par défaut
flex-start au début
flex-end à la fin
center au centre
baseline généralement identique à flex-start
Sinon, lorsque les caratères n'ont pas la même taille,
alignés sur la ligne de base du texte (line-height)

 

Testez-vous

Indiquer la bonne combinaison des attributs justify-content et align-items a produit le sreenshot : corrige
corrige

corrige

et en jouant en plus sur flex-direction:

corrige

VI flexbox résoud le problème toujours difficile du centrage vertical :


	flex-direction: column;
	justify-content: space-between;

Ingrédients (pour 4 personnes) :
  1. oeufs
  2. lait
  3. beurre
  4. râpé

On peut aussi centrer grace au classique "margin:auto" MAIS CETTE FOIS horizontalement et verticalement

<style type="text/css">
.container12 {
        display: flex;
        border : solid blue 1px;
        Padding:0;
        height:150px;
        width:300px;
}
.container12>* {
         border : solid black 1px;
         margin: auto;
         padding:5px;
}
 </style>
<div class="container12">
   <span>HELLO</span>
 </div>

HELLO

VII Gestion des retours à la ligne des "flex-item" : flex-wrap

flex-wrap autorise (ou non) les flex-item à se répartir sur une ou plusieurs ligne

<style type="text/css">
.container13 { border : solid blue 1px; height:150px; width:400px; padding:0; display: flex; flex-wrap:wrap; } .container13>* { border : solid orange 1px; margin: 1px; width:auto; list-style-position:inside } </style> Ingrédients (pour 4 personnes) :
  1. 200g courgettes
  2. 3 oeufs
  3. 40g mie de pain
  4. 15cl lait
  5. 20g beurre
  6. 60g râpé

VIII Beaucoup de choses pour personnaliser chaque élément

1 - Order

Order à pour valeur par défaut zéro. order détermine l'ordre dans la pile à la manière d'un z-index : plus order est grand, plus le flex-item est au bout de la pile

.container21>.oeufs {
    order : 2
}
.container21>.beurre {
    order : -1
}

Ingrédients (pour 4 personnes) :
  1. oeufs
  2. lait
  3. beurre
  4. râpé

2 - Alignement particulier avec align-self

Toutes les valeurs de l'attribut align-content sont reprises par l'attibut align-self (le comportement global de l'align-global peut être décliné pour chaque flex-item) :

  1. auto
  2. flex-start
  3. flex-end
  4. center
  5. baseline
  6. stretch

.container15 {
	border : solid blue 1px;
	padding:0;
	height:150px;
	width:300px;
	display: flex;
	flex-direction: column;
	align-content:flex-start
}
.container15>* {
    border : solid orange 1px;
	margin: 1px;
	width:auto;
	list-style-position:inside
}
.lait {
	align-self:flex-end;
}

Ingrédients (pour 4 personnes) :
  1. oeufs
  2. lait
  3. beurre
  4. râpé

3 Etirement /rétricissement d'un flex-item : flex-grow/flex-shrink

flex-grow (comme flex-shrink) est un nombre. Par défaut, ce nombre est à zéro. Si ce nombre prend la valeur 1, l'élémentl pourra s'étirer et prendre l'espace disponible dans le conteneur.

En plaçant flex-grow:1 sur un flex-item, et flex-grow:2 sur un autre, ces éléments s'étireront tels que le deuxième soit 2 fois plus large que le premier.


.lait1 {
	flex-grow: 1;
}
.rape1 {
	flex-grow:2;
}

Ingrédients (pour 4 personnes) :
  1. oeufs
  2. lait
  3. beurre
  4. râpé

IX Webographie

http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html

https://la-cascade.io/flexbox-guide-complet/

Un aide-mémoire illustré http://jonibologna.com/flexbox-cheatsheet/

Flexbox est la solution https://philipwalton.github.io/solved-by-flexbox/

Testez-vous
Construire le formulaire comme ci-dessous avec un label, un champ texte et un bouton de soumission.
Le champ de recherche doit être totalement fluide de sorte qu'au redimensionnement du formulaire ou du changement de texte du label ou du bouton, le formulaire n'explose pas sur plusieurs lignes.


Demander le corrigé