Les flex-items

Flexbox est une valeur de la propriété css display. J'ai pu en faire usage sur des projets requérant une compatibilité ie 11 minimum pour profiter des avantages qu'elle procure par rapport aux display: table, display: inline-block ou float: left lorsqu'il s'agit de mettre deux blocs côte à côte (pas de perte de flux, pas d'espace entre les deux blocs).

Avant de parler en détail des flex-items, je vais m'interesser rapidement au flex-container à qui on affecte le display flex. En effet, on donne à un container la valeur flex sur son display, puis une série de propriétés que je vais rapidement énumerer et qui agissent n'ont pas sur lui même, mais sur ses enfants directs (appellé flex-items).


- flex-direction, qui définit si vos flex-items s'affichent de manière horizontal ou vertical.
- flex-wrap, qui permet ou non le retour à la ligne des flex-items.
- justify-content, qui gère le positionnement horizontal des flex-items.
- align-items, qui gère le positionnement vertical des flex-items.
- align-content, qui gère le positionnement des lignes.

Pour plus de détails, consulter css-trick.

A présent nous allons voir en détail les propriétés que l'on applique directement sur les enfants.

ORDER
La propriété order permet de positionner les flex-items les uns par rapport aux autres.
Cette propriété prend des valeurs positive (1,2...) ou négative (-1,-2...).
L'intêret de cette propriété dans le cadre du responsive design est évidente, elle remplace les pull et push de bootstrap par exemple. Elle se montre même plus puissante avec la possibilité de changer des divs présentes sur des lignes différentes ce que ne permet pas les hack à base de position:relative; left:-xx%;
Mais cette propriété peut également servir dans d'autres cadres. On peut émuler le symbole inverse de + en css dans une version certes plus limitée.
L'exemple basique est celui d'un formulaire dans lequel la couleur du label dépendrait de l'état de l'input.

<div class="form-group">
	<input type="email" />
	<label>Email</label>
</div>
HTML
.form-group{
	display: flex;
	label{order: -1;}
	input{
		border: 1px solid #000;
		&:focus + label{font-weight: bold;}
		&:valid{
			border-color: green;
			&+ label{color: green;}
		}
		&:invalid{
			border-color: red;
			&+ label{color: red;}
		}
	}
}

FLEX-GROW
La propriété flex-grow permet de définir comment les flex-items occupent l'espace restant dans le flex-container.
Les valeurs sont des entiers positifs ou nuls.
C'est une propriété très interessante qui permet par exemple de réaliser un sticky footer de manière simple.

<div id="general">
	<header>HEADER</header>
	<main>
		<p>Lorem ipsum</p>
	</main>
	<footer>FOOTER</footer>
</div>
HTML
#general{
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
header{
	padding: 40px;
	background: deeppink;
}
main{
	flex-grow: 1;
	padding: 40px;
	background: mediumvioletred;
}
footer{
	padding: 40px;
	background: palevioletred;
}
Sass

A noter que ce sticky footer ne marche pas sous ie11 à cause d'un bug (https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview).
Ceci étant, le sticky footer n'étant qu'un plus, ce bug rentre dans le cadre de la dégradation élégante.

FLEX-SHRINK
La propriété flex-shrink permet de gérer l'espace lorsque les flex-items sont censés déborder du flex-container. C'est un peu le pendant inverse des flex-grow.
Il prend également un entier positif ou nul en paramètre.
Par defaut, les flexboxs (en flex-wrap: nowrap) ont un comportement similaire au display: table pour ce qui est du débordement, à savoir que si la somme des largeurs des flex-items est supérieure à la largeur, les flex-items vont se compresser pour ne pas déborder du flex-container.
Si l'on souhaite avoir un comportement similaire à des éléments en display:inline-block; white-space: nowrap; on doit mettre les flex-shrink à 0.

<div class="container">
	<div class="bloc1"></div>
	<div class="bloc2"></div>
</div>
<div class="container">
	<div class="bloc1 shrink2"></div>
	<div class="bloc2"></div>
</div>
<div class="container no-shrink">
	<div class="bloc1"></div>
	<div class="bloc2"></div>
</div>
HTML
.container{
	display: flex;
	width: 200px;
	height: 50px;
	border: 4px solid black;
}
.bloc1{
	width: 150px;
	height: 50px;
	background: navy;
}
.bloc2{
	width: 150px;
	height: 50px;
	background: teal;
}
.no-shrink .bloc1, .no-shrink .bloc2{flex-shrink: 0}
.shrink2{flex-shrink:2}
Sass

FLEX-BASIS
La propriété flex-basis permet de définir la largeur (ou la hauteur en flex-direction: column) d'un flex-item, elle est donc en apparence similaire à la propriété width (ou height).
La valeur prise par cette propriété est soit une largeur (10%, 30px...) soit auto. C'est cette dernière valeur qui, associé à flex-grow, la différencie d'un width.
Si les flex-basis ont une valeur auto, seul l'espace restant dans le flex-container sera distribué entre les flex-items. Si c'est une valeur standard, tout l'espace sera distribué sans prendre en compte la taille initiale des flex-items

<div class="container">
	<div class="bloc1">A</div>
	<div class="bloc2">AZERTY</div>
</div><br><br><br>
<div class="container">
	<div class="bloc3">A</div>
	<div class="bloc4">AZERTY</div>
</div>
HTML
.container{
	display: flex;
	width: 208px;
	height: 58px;
	border: 4px solid black;
	color: #fff;
}
.bloc1,.bloc2,.bloc3,.bloc4{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-grow: 1;
	height: 50px;
}
.bloc1{
	flex-basis: 0;
	background: navy;
}
.bloc2{
	flex-basis: 0;
	background: teal;
}
.bloc3{
	flex-basis: auto;
	background: navy;
}
.bloc4{
	flex-basis: auto;
	background: teal;
}
Sass

ALIGN-SELF
Align-self est une propriété qui laisse la possibilité d'avoir une exception sur la propriété du flex-container align-items.

<div class="container">
	<div></div>
	<div></div>
	<div></div>
	<div class="center"></div>
	<div class="center"></div>
	<div></div>
	<div></div>
	<div></div>
</div>
HTML
.container{
	display: flex;
	align-items: flex-end;
	justify-content: space-around;
	width: 300px;
	height: 100px;
	border: 4px solid red;
	background: black;
	&> div{
		width: 10%;
		height: 40px;
		background: white;
		&.center{align-self: flex-start;}
	}
}
Sass

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *