Les propriétés des enfants flexibles

Name: Flexbox et Grid Créer des sites modernes et responsives
Rating: 5 (3 reviews)

Introduction

Nous l’avons largement évoqué dans les chapitres précédents, dès qu’un conteneur possède la propriété et la valeur display: flex, tous les éléments inclus deviennent des enfants, des flex-items. Pour ces éléments enfants flexibles, comme nous l’avons fait dans les chapitres précédents, nous pouvons leur appliquer des propriétés communes. Mais nous pouvons aussi appliquer des propriétés CSS flexibles individuelles à un élément enfant particulier. C’est ce que nous allons voir dans ce chapitre.

Modifier l’ordre d’affichage des enfants

Le fichier d’exemple à télécharger se nomme : 01-Exemples Flexbox/C04-B.html.

Les éléments enfants d’un conteneur flexible s’affichent dans l’ordre défini dans la structure HTML.

Voici un exemple simple d’une liste <ul> :

<ul id="conteneur-liste">  
    <li>Un</li>  
    <li>Deux</li>  
    <li>Trois</li>  
    <li>Quatre</li>  
    <li>Cinq</li>  
</ul>

Voici les règles CSS utilisées :

#conteneur-liste {  
    display: flex;  
    flex-flow: row wrap;  
    justify-content: space-around;  
    width: 300px;  
    border: 1px solid #000;  
    background-color: #eee;  
    padding: 10px;  
}  
#conteneur-liste li {  
    list-style: none;  
    border: 1px solid #000;  
    padding: 5px;  
    background-color: white;  
}

Voici l’affichage obtenu :

Les éléments enfants <li> sont...

Modifier l’alignement des enfants

Le fichier d’exemple à télécharger se nomme : 01-Exemples Flexbox/C04-C.html.

C’est la propriété align-items qui permet de gérer l’alignement de tous les éléments enfants sur l’axe secondaire du conteneur parent. La propriété align-self permet de faire une ou des exceptions pour un ou plusieurs enfants ciblés. Les valeurs disponibles sont identiques à celles de la propriété align-items : flex-start, flex-end, center, baseline et stretch.

Voici la structure HTML utilisée pour cet exemple :

<ul id="conteneur-liste">  
    <li>Un</li>  
    <li class="deux">Deux</li>  
    <li>Trois</li>  
    <li class="quatre">Quatre</li>  
    <li>Cinq</li>  
</ul>

Et voilà les règles CSS appliquées :

#conteneur-liste {  
    display: flex;  
    flex-flow: row wrap;  
    justify-content: space-around;  
    align-items: stretch;  
    width: 300px;  
    height: 100px;  
    border:...

Autoriser l’agrandissement des enfants

Le fichier d’exemple à télécharger se nomme : 01-Exemples Flexbox/C04-D.html.

La place occupée par les éléments enfants dépend de la quantité de contenu textuel. Voyons immédiatement ce principe par un exemple simple.

Voilà la structure HTML :

<ul id="conteneur-liste">  
    <li>Un</li>  
    <li>Deux</li>  
    <li>Trois</li>  
    <li>Quatre</li>  
    <li>Cinq</li>  
</ul>

Et voilà les règles CSS utilisées :

#conteneur-liste {  
    display: flex;  
    flex-flow: row wrap;  
    width: 400px;  
    border: 1px solid #000;  
    background-color: #eee;  
    padding: 10px;  
}  
#conteneur-liste li {  
    list-style: none;  
    border: 1px solid #000;  
    padding: 5px;  
    background-color: white;  
}

Voici l’affichage obtenu :

Vous voyez bien que la largeur de chaque élément enfant dépend de la quantité...

Autoriser le rétrécissement des éléments enfants

Le fichier d’exemple à télécharger se nomme : 01-Exemples Flexbox/C04-E.html.

La propriété flex-shrink va fonctionner à l’inverse de flex-grow. Elle va permettre aux éléments enfants de réduire proportionnellement leur largeur, dans le cas d’un alignement sur l’axe horizontal, pour que tous les éléments enfants puissent s’afficher dans la largeur du conteneur parent. Attention, pour que flex-shrink fonctionne, il faut que la somme des largeurs des enfants soit supérieure à la largeur du conteneur parent.

Notez que la valeur par défaut de flex-shrink est 1. Cela veut dire que nous autorisons le rétrécissement des éléments.

Voilà la structure HTML :

<ul id="conteneur-liste">  
    <li class="un">Un</li>  
    <li>Deux</li>  
    <li class="trois">Trois</li>  
    <li>Quatre</li>  
    <li>Cinq</li>  
</ul>

Et voilà les règles CSS appliquées :

#conteneur-liste {  
    display: flex;  
    flex-flow: row nowrap;  
    width:...

Définir la largeur des éléments enfants

Le fichier d’exemple à télécharger se nomme : 01-Exemples Flexbox/C04-F.html.

La propriété flex-basis permet de définir la largeur souhaitée pour les éléments enfants. Cette valeur va s’appliquer avant que les éventuels facteurs d’agrandissement (flex-grow) et le rétrécissement (flex-shrink) ne s’appliquent.

La valeur par défaut de flex-basis est auto et elle spécifie que la largeur est définie par son contenu. Si vous ne souhaitez pas utiliser cette valeur par défaut, vous devez indiquer la valeur souhaitée, avec l’unité voulue.

Voilà la structure HTML :

<ul id="conteneur-liste">  
    <li class="un">Un</li>  
    <li>Deux</li>  
    <li class="trois">Trois</li>  
    <li>Quatre</li>  
    <li>Cinq</li>  
</ul>

Et voilà les règles CSS utilisées :

#conteneur-liste {  
    display: flex;  
    flex-flow: row nowrap;  
    width: 400px;  
    border: 1px solid #000;  
    background-color:...

La syntaxe raccourcie des propriétés individuelles

La propriété flex est la syntaxe raccourcie des propriétés individuelles flex-grow, flex-shrink et flex-basis.

Voyons cet exemple : flex: 1 0 auto. Cela veut dire que l’élément ciblé utilisant cette propriété :

1 : peut s’agrandir, équivalent à flex-grow: 1.
0 : ne peut pas se rétrécir, équivalent à flex-shrink: 0.
auto : possède une dimension déterminée par son contenu, équivalent à flex-basis: auto.

Créer une mise en page fluide

Le fichier d’exemple à télécharger se nomme : 01-Exemples Flexbox/C04-H.html.

1. La structure initiale

Nous allons conclure ce chapitre en étudiant un cas simple d’une mise en page fluide. Voici la structure HTML :

<div id="conteneur">  
    <p>Un. Duis mollis, est non commodo luctus...</p>  
    <p>Deux. Cras justo odio, dapibus ac facilisis in...</p>  
    <p class="trois">Trois. Integer posuere erat a ante...</p>  
    <p>Quatre. Praesent commodo cursus magna...</p>  
    <p>Cinq. Aenean eu leo quam. Pellentesque ornare sem...</p>  
</div>

Nous avons une boîte <div> faisant office de conteneur avec un identifiant conteneur qui inclut cinq paragraphes <p>. Le troisième paragraphe possède la classe .trois.

Voyons les règles CSS :

#conteneur {  
    display: flex;  
    flex-flow: row wrap;  
    justify-content: space-around;  
    align-items: flex-start;  
    width: 80%;  
    border: 1px solid #000;  
    background-color: #eee;  
    padding: 10px;  
}  
#conteneur p {  
    flex: 0 0 10em;  
    border: 1px solid #000;  
    padding: 5px;  ...

Les dimensions appliquées

Nous venons d’utiliser beaucoup de propriétés pour appliquer des dimensions à nos éléments HTML dans un contexte flexible. Il convient maintenant de définir la priorité des propriétés.

Les propriétés min-width et max-width sont toujours prioritaires par rapport aux autres propriétés que sont width, flex-grow, flex-shrink et flex-basis. Supposons qu’un élément possède une largeur définie par flex-basis: 20m et une autre largeur définie par min-width: 15em, c’est cette dernière qui sera utilisée pour dimensionner l’élément. Sur le même principe flex-basis est prioritaire par rapport à width.

Si vous avez un conteneur parent qui utilise la propriété flex-wrap avec les valeurs wrap ou wrap-reverse, les enfants qui possèdent la propriété flex-shrink avec une valeur positive, passeront d’abord à la ligne suivante, avant d’exploiter le rétrécissement. En d’autres termes flex-wrap est prioritaire sur flex-shrink.

Si un enfant possède des valeurs pour les propriétés flex-grow, flex-shrink et flex-basis, les premières sont prioritaires par rapport à flex-basis. En d’autres termes, un enfant ayant un flex-basis défini et des flex-grow et flex-shrink...