Les propriétés flexibles de CSS vous permettent d’aligner les éléments de manière plus flexible et plus réactive. Cela le rend utile lorsque vous souhaitez que vos éléments HTML soient plus réactifs dans le navigateur Web.
Cet article explique comment vous pouvez utiliser certaines propriétés flexibles. Cela inclut les propriétés flex-direction, justifie-content, align-self, align-items, align-content et gap.
Comment configurer l’affichage CSS Flex
Un exemple de structure que vous pouvez utiliser pour explorer les bases de la flexbox est un ensemble de divs enfants sous un seul div parent. Dans le code ci-dessous, il y a une div “parent” principale. Les trois divs enfants représentent des éléments que vous pouvez aligner à l’aide des propriétés flexibles.
<div class="parent">
<div class="child-item"></div>
<div class="child-item"></div>
<div class="child-item"></div>
</div>Pour que tout style flexible fonctionne, vous devrez ajouter le affichage : flexible propriété au conteneur flex parent.
.parent {
display: flex;
}
Sans flex, les divs enfants s’affichent les uns après les autres dans une formation de colonne vers le bas de la page.
Pour afficher un exemple de cette configuration, affichez et exécutez le code dans ce Extrait CodePen.
Comment contrôler la direction de la mise en page
Le flex-direction La propriété détermine la direction des lignes ou des colonnes des éléments enfants.
Les options de la propriété flex-direction incluent :
UTILISEZ LA VIDÉO DU JOURflex-direction: row | column | row-reverse | column-reverse
Vous devrez ajouter un conteneur parent entourant les éléments que vous souhaitez aligner.
HTML :
<div class="parent">
<div class="red"></div>
<div class="orange"></div>
<div class="yellow"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="purple"></div>
</div>
CSS :
.red { background-color:red; }
.orange { background-color: orange; }
.yellow { background-color: yellow; }
.green { background-color: green;}
.blue { background-color: blue; }
.purple { background-color: purple; }.parent div {
width: 40px;
height: 40px;
}
Appliquez la propriété flex-direction au conteneur flexible parent. Cela alignera les éléments div enfants.
.parent {
width: 300px;
display: flex;
flex-direction: row;
}
De nombreuses propriétés flexibles font référence au concept d’axe principal et d’axe transversal. Lorsque la direction de flexion est rangée, l’axe principal représente la direction horizontale et l’axe transversal représente la verticale. Une valeur de colonne commute ces axes.
Affichez le code de la propriété flex-direction dans ce Extrait CodePen pour voir quelques exemples.
Comment aligner les éléments le long de l’axe transversal
Le aligner les éléments La propriété contrôle l’alignement des éléments le long de l’axe transversal. Pour la valeur par défaut flex-direction, row, align-items contrôle l’alignement vertical des éléments.
Les options de la propriété align-items incluent :
align-items: flex-start | flex-end | align-items | stretch
Ajoutez la propriété align-items au conteneur parent pour aligner ses enfants.
.parent {
display: flex;
align-items: flex-start;
}De plus, vous pouvez choisir d’aligner les éléments à l’aide d’une ligne de base. Par défaut, l’option de ligne de base aligne tous les éléments en fonction de la base des éléments.
Vous pouvez également choisir le point de départ de la ligne de base, par exemple le haut (première ligne de base) ou le bas (dernière ligne de base).
align-items: baseline | first baseline | last baseline;Pour align-items: baseline pour fonctionner, assurez-vous que chaque élément a une hauteur ou une largeur différente (selon l’axe que vous utilisez).
<div class="parent">
<div class="red" style="height:20px"></div>
<div class="orange" style="height:60px"></div>
<div class="yellow" style="height:30px"></div>
<div class="green" style="height:90px"></div>
<div class="blue" style="height:30px"></div>
<div class="purple" style="height:50px"></div>
</div>
Affichez le code de la propriété align-items dans ce Extrait CodePen pour voir quelques exemples.
Comment remplacer l’alignement sur des éléments individuels
Vous pouvez utiliser le s’aligner propriété pour remplacer tout style align-items du conteneur parent. Cela signifie que vous pouvez définir un alignement flexible séparé sur un élément individuel.
Les options de la propriété align-self incluent :
align-self: auto | flex-start | flex-end | center | baseline | stretchSupposons, par exemple, que le conteneur parent ait un style flex-direction défini sur “row”.
.parent {
display: flex;
flex-direction: row;
}Vous pouvez appliquer la propriété align-self sur l’élément individuel. L’élément individuel utilisera le style de la propriété align-self et centrera l’élément sur le conteneur parent.
<div class="parent">
<div class="red"></div>
<div class="orange"></div>
<div class="yellow"></div>
<div class="green" style="align-self:center"></div>
<div class="blue"></div>
<div class="purple"></div>
</div>Affichez le code de la propriété align-self dans ce Extrait CodePen pour voir quelques exemples.
Comment répartir les lignes sur l’axe transversal
Le aligner le contenu La propriété aligne les enfants le long de l’axe vertical. Il peut également déterminer l’espacement entre les éléments qui se trouvent sur plusieurs lignes.
Les options de la propriété align-content incluent :
align-content: flex-start | flex-end | center | stretch | space-between | space-aroundAjoutez la propriété align-content au conteneur flex parent. La propriété align-content ne fonctionnera que si la propriété flex-wrap est définie. Ajoutez flex-wrap:wrap au conteneur parent et réduisez la largeur de la div parent pour forcer les éléments sur plus d’une ligne.
.parent {
flex-wrap: wrap;
display: flex;
align-content: flex-start;
width: 180px;
}Affichez le code de la propriété align-content dans ce Extrait CodePen pour voir quelques exemples.
Comment aligner les éléments sur l’axe principal
Le justifier-contenu La propriété ajoute un alignement à droite, à gauche ou centré aux éléments enfants. Il répartit également les éléments en ajoutant des espaces entre eux lors de la justification du contenu.
Les options pour la propriété justifier-content incluent :
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenlyEnveloppez les éléments que vous souhaitez aligner sous un conteneur flexible parent.
HTML :
<div class="parent">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
CSS:
.red { background-color: red; }
.green { background-color: lightgreen; }
.blue { background-color: blue; }Ajoutez la propriété justifier-content au conteneur flex parent.
.parent {
width: 300px;
display: flex;
justify-content: flex-start;
}La propriété justifier-content prend également en charge les valeurs répertoriées dans la spécification CSS Box Alignment. Cela inclut des valeurs telles que “début”, “fin”, “gauche” et “droite”. Certains navigateurs ne les prennent pas en charge.
La propriété justifier-content a également un mot-clé “sûr” que vous pouvez utiliser. Cela garantit que les éléments essaient de rester dans la plage du conteneur parent.
Il est également utilisé pour éviter la perte de données, dans le cas où vous centrez un mot long. L’utilisation du mot-clé safe empêche une div plus courte de couper les première et dernière lettres.
.parent {
display: flex;
justify-content: safe center;
}
Le mot-clé safe est également limité à certains navigateurs. Vous pouvez vérifier la compatibilité sur Puis-je utiliser.
Affichez le code de la propriété justifier-content dans ce Extrait CodePen pour voir quelques exemples.
Comment ajouter un espacement entre les éléments
Le écart La propriété vous permet d’ajouter une quantité d’espace entre les éléments. C’est l’un des nouvelles fonctionnalités CSS qui peuvent vous aider à créer une mise en page réactive.
Appliquez la propriété gap au conteneur flexible parent.
.parent {
display: flex;
gap: 70px;
}Si vous ajoutez un espace qui force la longueur des éléments à dépasser la largeur du parent, les éléments se rétréciront pour essayer de tenir à l’intérieur de la ligne.
.parent {
width: 300px;
gap: 120px;
}Si vous utilisez flex-wrap : wrap pour pousser les éléments vers une nouvelle ligne, le montant de l’écart s’appliquera également à l’espace entre les lignes.
.parent {
width: 300px;
flex-wrap: wrap;
gap: 120px;
}De plus, vous pouvez également définir le interligne et écart de colonne Propriétés. Encore une fois, vous devrez les appliquer au conteneur flex parent.
La propriété row-gap détermine l’espace entre chaque ligne. La propriété column-gap détermine l’espace entre chaque colonne.
.parent {
row-gap: 120px;
}
.parent {
column-gap: 120px;
}
Affichez le code de la propriété gap dans ce Extrait CodePen pour voir quelques exemples.
Utiliser plus de propriétés Flex sur votre site Web
J’espère que vous êtes maintenant familiarisé avec les différentes propriétés flexibles que vous pouvez utiliser pour aligner les éléments sur votre page Web. Cela inclut la façon dont vous pouvez utiliser les propriétés flex-direction, justifier-content, align-self, align-items, align-content et gap.
Flexbox est une technique de mise en page puissante, mais ce n’est qu’une petite partie du CSS. Vous pouvez également en savoir plus sur les nouvelles propriétés CSS, les techniques de codage propres et les outils utilisés pour l’optimisation CSS.
11 outils utiles pour vérifier, nettoyer et optimiser les fichiers CSS
Lire la suite
A propos de l’auteur
Sharlene Von Drehnen
(6 articles publiés)
Sharlene est rédactrice technique chez MUO et travaille également à plein temps dans le développement de logiciels. Elle est titulaire d’un baccalauréat en informatique et possède une expérience antérieure en assurance qualité et en tutorat universitaire. Sharlene adore jouer et jouer du piano.
Plus de Sharlene Von Drehnen
Abonnez-vous à notre newsletter
Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !
Cliquez ici pour vous abonner
— to www.makeuseof.com
Jeu de briques
Snake
Pacman
Bubble