Flex, introduction.

display et flex-direction.

Le conteneur parent définie un contexte d'affichage général pour tous ses descendants dont l'axe principal est vertical ou horizontal. Les descendants peuvent eux-même posséder une autre orientation de l'axe principal pour leur contenu. Cela ce fait par la propriété 'display' (déclarer le bloc de type flex) et 'flex-direction' de la manière suivante:

.conteneur {
display: flex | inline-flex ;

flex-direction: row | row-reverse | column | column-reverse ; 
}
									

La valeur par défaut de 'flex-direction' est 'row'.

Si je déclare la propriété 'display' à 'flex', l'élément devient un flex-container et se comporte comme un élément de type block. Si je la déclare à 'inline-flex' le flex-container se comporte comme un élément de type inline-block. Ces éléments ainsi déclarés peuvent s'aligner verticalement entre eux avec la propriété 'vertical-align'. A tester !!

row

un
deux
trois

row-reverse

un
deux
trois

column

un
deux
trois

column-reverse

un
deux
trois

Le code des quatre exemples précédents:

.ex {
font-size: 0.7em;
text-align: justify;
padding: 0.3em;
}

.exemple01 {
display: flex;
flex-direction: row;
border: 1px solid #0C1308;
}

.exemple02 {
display: flex;
flex-direction: row-reverse;
border: 1px solid #0C1308;
}

.exemple03 {
display: flex;
flex-direction: column;
border: 1px solid #0C1308;
}

.exemple04 {
display: flex;
flex-direction: column-reverse;
border: 1px solid #0C1308;
}

.exemple01-a {
display: flex;
background-color: #55A0FF;
padding: 0.5em;
}

.exemple01-b {
display: flex;
background-color: #D16DBA;
padding: 0.5em;
}

.exemple01-c {
display: flex;
background-color: #FFC554;
padding: 0.5em;
}

<div class="exemple01"> /* code identique à tous les exemples */
	<div class="exemple01-a ex">un</div>	
	<div class="exemple01-b ex">deux</div>
	<div class="exemple01-c ex">trois</div>		
</div>
									

flex-wrap.

Cette propriété permet de définir si un item flex peut passer à la ligne ou pas selon son axe principal. Pour 'wrap-reverse', les éléments passent à la ligne en sens inverse. Par défaut, la valeur est 'nowrap'.

.conteneur {

flex-wrap: wrap | nowrap | wrap-reverse

}
									

Axe principal row.

wrap

un premier bloc assez large.
un deuxième bloc assez large lui aussi.
un troisième bloc tout aussi large.
un quatrième bloc plus petit.
un cinquième bloc.

nowrap

un premier bloc assez large.
un deuxième bloc assez large lui aussi.
un troisième bloc tout aussi large.
un quatrième bloc plus petit.
un cinquième bloc.

wrap-reverse

un premier bloc assez large.
un deuxième bloc assez large lui aussi.
un troisième bloc tout aussi large.
un quatrième bloc plus petit.
un cinquième bloc.

Le code:

.exemple05 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

.exemple06 {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}

.exemple07 {
display: flex;
flex-direction: row;
flex-wrap: wrap-reverse;
}
									

Axe principal column.

wrap - nowrap - wrap-reverse

un premier bloc assez large.
un deuxième bloc assez large lui aussi.
un troisième bloc tout aussi large.
un quatrième bloc plus petit.
un cinquième bloc.

Le code:

/* Donne le même résultat dans ce contexte*/

.exemple08 {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}

.exemple09 {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}

.exemple10 {
display: flex;
flex-direction: column;
flex-wrap: wrap-reverse;
}
									

flex-flow.

La propriété 'flex-flow' est un raccourci de 'flex-direction' et de 'flex-wrap'. Sa valeur par défaut est 'row nowrap'.

.exemple {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}

est égal à:

.exemple {
display: flex;
flex-flow: column wrap;
}

									

justify-content.

Permet de définir la position des items flex enfants par rapport à l'axe principal du parent. La valeur par défaut est 'flex-start'.

.conteneur {

justify-content: flex-start | flex-end | center | space-between | space-around |

}
									

Axe principal row.

flex-start

un premier.
un deuxième bloc.
un troisième bloc.

flex-end

un premier.
un deuxième bloc.
un troisième bloc.

center

un premier.
un deuxième bloc.
un troisième bloc.

space-between

un premier.
un deuxième bloc.
un troisième bloc.

space-around

un premier.
un deuxième bloc.
un troisième bloc.

Axe principal column.

flex-start

un premier.
un deuxième bloc.
un troisième bloc.

flex-end

un premier.
un deuxième bloc.
un troisième bloc.

center

un premier.
un deuxième bloc.
un troisième bloc.

space-between

un premier.
un deuxième bloc.
un troisième bloc.

space-around

un premier.
un deuxième bloc.
un troisième bloc.

Le code pour column:

.exemple16 {
display: flex;
flex-direction: column;
justify-content: flex-start;
height: 150px;
}

etc...
									

align-items.

Permet l'alignement des items enfants par rapport à l'axe secondaire du parent. La valeur par défaut est 'stretch'.

align-items: stretch | flex-start | flex-end | center | baseline
									

Axe principal row.

stretch

un premier.
un deuxième bloc.
un troisième bloc.

flex-start

un premier.
un deuxième bloc.
un troisième bloc.

flex-end

un premier.
un deuxième bloc.
un troisième bloc.

center

un premier.
un deuxième bloc.
un troisième bloc.

baseline

un premier.
UN DEUXIEME BLOC.
un troisième bloc.

Le code en bref:

.exemple {
display: flex;
flex-direction: row;
align-items: flex-end;
height: 100px;
}
									

Axe principal column.

stretch

un premier.
un deuxième bloc.
un troisième bloc.

flex-start

un premier.
un deuxième bloc.
un troisième bloc.

flex-end

un premier.
un deuxième bloc.
un troisième bloc.

center

un premier.
un deuxième bloc.
un troisième bloc.

baseline

un premier.
UN DEUXIEME BLOC.
un troisième bloc.

Le code en bref:

.exemple {
display: flex;
flex-direction: column;
align-items: stretch;
height: 100px;
}
									

align-content.

Permet le positionnement des rangées de conteneurs flex qui ont pour valeur: 'flex-wrap: wrap'. La valeur par défaut est 'stretch'.

align-content: stretch | flex-start | flex-end | center | space-between | space-around
									

Axe principal row.

stretch

un premier bloc assez large..
un deuxième bloc assez large..
un troisième bloc assez large..
un quatrième bloc assez large..
un cinquième bloc assez large..

flex-start

un premier bloc assez large..
un deuxième bloc assez large..
un troisième bloc assez large..
un quatrième bloc assez large..
un cinquième bloc assez large..

flex-end

un premier bloc assez large..
un deuxième bloc assez large..
un troisième bloc assez large..
un quatrième bloc assez large..
un cinquième bloc assez large..

center

un premier bloc assez large..
un deuxième bloc assez large..
un troisième bloc assez large..
un quatrième bloc assez large..
un cinquième bloc assez large..

space-between

un premier bloc assez large..
un deuxième bloc assez large..
un troisième bloc assez large..
un quatrième bloc assez large..
un cinquième bloc assez large..

space-around

un premier bloc assez large..
un deuxième bloc assez large..
un troisième bloc assez large..
un quatrième bloc assez large..
un cinquième bloc assez large..

align-self.

Permet de positionner un bloc flex par rapport à ses frères, la valeur par défaut est 'align-self: auto'.

align-self: auto | stretch | flex-start | flex-end | center| baseline
									

Axe principal row.

auto

un premier bloc.
un deuxième bloc.
un troisième bloc.

stretch

un premier bloc.
un deuxième bloc.
un troisième bloc.

flex-start

un premier bloc.
un deuxième bloc.
un troisième bloc.

flex-end

un premier bloc.
un deuxième bloc.
un troisième bloc.

center

un premier bloc.
un deuxième bloc.
un troisième bloc.

baseline

un premier bloc.
un deuxième bloc.
un troisième bloc.

Le code en bref:

.exemple {
display: flex;
flex-direction: row;
align-items: stretch;
height: 150px;
border: 1px solid #0C1308;
}

.exemple02-a {
display: flex;
background-color: #55A0FF;
padding: 0.5em;
}

.exemple03-a {
display: flex;
background-color: #D16DBA;
align-self: flex-end;
padding: 0.5em;
}
									

flex-grow.

Permet à un bloc enfant flex de s'élargir pour occuper l'espace restant ou une partie, la valeur par défaut est 'flex-grow: 0'. Le facteur d'agrandissement est déterminé par une valeur supérieur à 0.

flex-grow: 0 | 1 | 2 
									

Axe principal row.

flex-grow: 2 | 0 | 1

un premier.
un deuxième bloc.
un troisième bloc.

Le code en bref:

.exemple04-a {
display: flex;
background-color: #55A0FF;
flex-grow: 2;
}

.exemple04-b {
display: flex;
background-color: #D16DBA;
flex-grow: 0;
}

.exemple04-c {
display: flex;
background-color: #FFC554;
flex-grow: 1;
}
									

flex-shrink

Permet à un bloc enfant flex de se rétrécir s'il n'y a pas assez d'espace au sein de son conteneur, la la valeur par défaut est 'flex-shrink: 1'.

flex-shrink: 0 | 1 
									

Axe principal row.

flex-shrink: 1 | 0 | -

un premier bloc qui peut se rétrécir.
un deuxième bloc qui peut pas se rétrécir !
un troisième bloc qui peut se rétrécir.

Le code en bref:

.exemple05-a {
display: flex;
background-color: #55A0FF;
flex-shrink: 1;
}

.exemple05-b {
display: flex;
background-color: #D16DBA;
flex-shrink: 0;
}

.exemple05-c {
display: flex;
background-color: #FFC554;
}
									

flex-basis.

Cette propriété indique la taille d'un item flex enfant (width ou height en fonction de son axe principal) avant que ne lui soit appliqué des propriétés d'grandissement ou de rétrécicement données par 'flex-grow' et 'flex-shrink'. Faire attention que ces valeurs ne rentrent pas en conflit avec 'min-width' ou 'max-width'. La valeur par défaut est 'flex-basis: auto'. Les valeurs possibles sont:

flex-basis: auto | 0 | valeur en % |
									

Si la valeur est '0', la taille du conteneur est égal au minimum de son contenu insécable.


Articles connexes:

Récapitulatif des propriétés flex.[ GO! ]

Test des propriétés flex 01.[ GO! ]


Retour à l'index. [ go ]

Keep and Try it ! Dernière mise à jour: 01/11/2020