Editions ENI Livres | Vidéos | e-Formations
Le flux des enfants flexibles
Définir la direction
Le fichier d’exemple à télécharger se nomme : 01-Exemples Flexbox/C02-A-1-2-3.html.
1. La propriété de direction
La propriété flex-direction va nous permettre de définir la direction principale dans le conteneur flexible parent. Cette direction principale va indiquer comment les éléments enfants seront placés dans le conteneur parent. Nous pouvons définir un axe principal horizontal ou vertical.
Voici les valeurs acceptées par la propriété flex-direction : row, row-reverse, column et column-reverse. La valeur par défaut est row. Il n’y a pas d’héritage.
2. La direction horizontale en ligne
La propriété flex-direction utilise la valeur row par défaut. Cette valeur donne une direction horizontale pour le positionnement des éléments enfants. Donc, si vous omettez la propriété flex-direction: row, elle est automatiquement appliquée. Les flex-items sont donc affichés horizontalement, dans la ligne, les uns à côté des autres, dans l’ordre de saisie dans le code HTML.
Voici un premier exemple :
<div id="conteneur1">
<p class="p1">Un. Maecenas faucibus mollis interdum...</p>
<p class="p2">Deux. Fusce dapibus, tellus ac cursus commodo...</p> ...Contrôler le flux des éléments enfants
Le fichier d’exemple à télécharger se nomme : 01-Exemples Flexbox/C02-B.html.
1. Gérer le passage à la ligne
La propriété flex-wrap va déterminer le comportement des éléments enfants dans le conteneur, lorsque ceux-ci devront aller à la ligne suivante. Cela va se produire quand le conteneur ne sera pas assez grand pour contenir tous les enfants dans la direction principale. Nous pourrons interdire le passage à la ligne avec la valeur nowrap ou, au contraire, autoriser le passage à la ligne avec la valeur wrap.
Voici les valeurs utilisables avec la propriété flex-wrap : nowrap, wrap et wrap-reverse. La valeur par défaut est nowrap. Il n’y a pas d’héritage.
2. La propriété pour aller à la ligne
Voici la structure HTML que nous allons utiliser. C’est une simple liste <ul> :
<ul id="conteneur-liste">
<li>Un</li>
<li>Deux</li>
<li>Trois</li>
<li>Quatre</li>
<li>Cinq</li>
<li>Six</li>
<li>Sept</li>
<li>Huit</li>
<li>Neuf</li>
<li>Dix</li>...Le flux des éléments en blocs
Le fichier d’exemple à télécharger se nomme : 01-Exemples Flexbox/C02-C.html.
Dans l’exemple précédent, les éléments enfants sont de type list-item. Voyons maintenant l’utilisation d’éléments enfants de type block, avec des paragraphes <p>.
Voici la structure HTML utilisée :
<div id="conteneur">
<p class="p1">Un. Maecenas faucibus mollis interdum...</p>
<p class="p2">Deux. Fusce dapibus, tellus ac cursus commodo...</p>
<p class="p3">Trois. Duis mollis, est non commodo luctus...</p>
<p class="p4">Quatre. Nulla vitae elit libero, a pharetra...</p>
</div> Voici les règles CSS utilisées :
#conteneur {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 600px;
border: 1px solid #000;
background-color: #eee;
}
p {
margin: 0;
width: 200px;
}
.p1 {
background-color: antiquewhite;
}
.p2 {
background-color: azure;
}
.p3 {
background-color:...