Cours HTML

CSS : Mise en page flexible

La propriété Flexbox

La Flexbox est un modèle de mise en page qui règle :

• La disposition des éléments : horizontale, verticale, avec passage à la ligne ou non
• Alignement des éléments : centrage, justification
• La réorganisation des éléments
• La gestion des espaces

La réalisation

La boîte flexible se rédige en commençant par créer un conteneur et ensuite on place les différentes boîtes à l'intérieur de ce conteneur.

Cet article est inspiré de l'article d'Alsace création sur la Flexbox

1. Mise en place du conteneur

.container {
	display: flex;
}
  

2. Écriture des boîtes (ou flex item)

Un élément "flex-item" n’est plus considéré comme un “block” ou un “inline” classique (les valeurs de display autre que none, certaines propriétés telles que float n’ont pas d’effet sur lui).

La disposition des éléments

La distribution des éléments enfants ou flex item peut être horizontale ou verticales

• row disposition horizontale (valeur par défaut)
• row-reverse disposition horizontale inversée
• column disposition verticale
• column-reverse disposition verticale inversée

Cette propriété s’applique au conteneur et détermine l’axe principal du modèle de boîte flexible.

.container {
	display: flex;
	flex-direction: row-reverse;
}

Alignement des éléments :

La mis en page Flexbox permet de gérer finement les alignements et centrages, en différenciant les deux axes d’affichage :

1. Alignement sur un axe principal avec la propriété justify-content
2. Alignement sur un axe secondaire avec la propriété align-items

>Ces deux propriétés s’appliquent au conteneur.

Propriété justify-content

Les alignements dans l’axe de lecture principal sont définis à l’aide de la propriété justify-content, dont les valeurs possibles sont :

• flex-start : sens de lecture (valeur par défaut)
• flex-end: élément positionnés à la fin
• center
• space-between:justificartion
• space-around:autre justification

.container {
	flex-direction: column;
	justify-content: flex-end;
}

Propriété : align-items

Dans l’axe secondaire, les alignements sont régis via la propriété align-items, dont les valeurs sont :

• flex-start : au début
• flex-end :à la fin)
• center:au centre
• baseline : généralement identique à flex-start
• stretch:étirés dans l’espace disponible, valeur par défaut

.container {
	flex-direction: column;
	justify-content: flex-end;
    align-items: center;
}

Flexibilité des éléments

La propriété flex est un raccourci de trois propriétés, flex-grow, flex-shrink et flex-basis, qui s’appliquent aux "flex-items" et dont les fonctionnalités sont :

• flex-grow : capacité pour un élément à s’étirer dans l’espace restant, la valeur par défaut est 0
• flex-shrink : capacité pour un élément à se contracter si nécessaire, sa valeur par défaut est 1
• flex-basis: taille initiale de l’élément avant que l’espace restant ne soit distribué, sa valeur apr défaut est auto.

.container {
	flex-direction: column;
	justify-content: flex-end;
}
.item03{flex-grow:1;}

L'ordre

La propriété "order " permet d'ordonner les éléments à sa guise. On nomme les flex-item d'un numéro. La valeur initiale est 0 et non 1.

.item01{order:1;}
.item02{order:2;}
.item03{order:3;}
.item04{order:0;}

Retrouvez des informations très compmlètes sur le site CSS-trick