Une introduction amicale à Flexbox pour les débutants

CSS Flexbox: outil de mise en page unidimensionnel

Flexbox, le module de mise en page élastique, est un outil puissant dans CSS pour créer des dispositions unidimensionnelles telles qu'une série de projets similaires. Il convient particulièrement aux dispositions d'une seule ligne ou d'une seule colonne et peut être utilisé comme alternative fiable aux dispositions de grille dans les anciens navigateurs. Cet article vous fournira un guide Flexbox facile à comprendre.

Malgré l'avènement des dispositions de grille CSS, Flexbox a toujours sa valeur unique. Bien qu'il y ait quelques chevauchements de fonctions entre les deux, ils jouent des rôles différents dans la disposition CSS. D'une manière générale, Flexbox est plus adapté aux dispositions unidimensionnelles (par exemple, une série de projets similaires), tandis que Grid est plus adapté aux dispositions bidimensionnelles (par exemple, des éléments de la page entière).

Cependant, Flexbox peut également être utilisé pour les mises en page pleine page, donc dans les navigateurs qui ne prennent pas en charge la grille, il peut être utilisé comme une alternative efficace aux dispositions de grille. (Bien que Grid ait été rapidement amélioré dans la plupart des navigateurs modernes, Flexbox a toujours une gamme de soutien plus large, ce qui est très pratique si vous avez besoin de dispositions pour fonctionner correctement dans certains navigateurs plus anciens.)

Avantages de Flexbox

Certains des avantages de Flexbox comprennent:

Le contenu de la page peut être disposé dans n'importe quelle direction (gauche, droite, bas ou même en haut).
L'ordre visuel des clips de contenu peut être inversé ou réorganisé.
• Les éléments
peuvent être «redimensionnés de manière flexible» en réponse à l'espace disponible et peuvent être alignés par rapport à leurs conteneurs ou les uns avec les autres.
Créer une disposition de colonnes monospace (quelle que soit la quantité de contenu dans chaque colonne) est très facile.

Pour illustrer diverses propriétés et possibilités, supposons la disposition simple suivante comme exemple de certaines démonstrations dans cet article:

<div class="example">
  <header>header content here</header>
  <main class="main">
    <nav>nav content here</nav>
    <div class="content">main content here</div>
    <aside>aside content here</aside>
  </main>
  <footer>footer content here</footer>
</div>

La première étape consiste à placer les éléments dans

, c'est-à-dire .main et <nav>, et de les afficher côte à côte. Sans Flexbox, nous pouvons utiliser des flotteurs pour organiser ces trois éléments, mais ce n'est pas très direct. De plus, les méthodes traditionnelles apportent un problème bien connu: chaque colonne a la même hauteur que la hauteur de son contenu. Vous devez donc définir la même hauteur pour les trois colonnes pour les rendre cohérentes en longueur, ou utiliser une sorte de truc. <aside>

Flexbox a vu le jour.

pour utiliser Flexbox Le noyau de

flexbox est la valeur

de l'attribut display, qui doit être défini en tant qu'élément de conteneur. Cela transformera ses éléments enfants en "éléments élastiques". Ces articles obtiendront des propriétés pratiques par défaut. Par exemple, ils sont placés côte à côte, et les éléments sans largeur spécifiés occupent automatiquement l'espace restant. flex

Donc, si vous définissez

S .main à display, ses éléments enfants flex serreront automatiquement entre .content et <nav>. N'est-ce pas très pratique sans aucun calcul? En prime, ces trois éléments auront comme par magie la même hauteur. <aside>

<div class="example">
  <header>header content here</header>
  <main class="main">
    <nav>nav content here</nav>
    <div class="content">main content here</div>
    <aside>aside content here</aside>
  </main>
  <footer>footer content here</footer>
</div>

Ordre des éléments: Flexbox order Attributs

Une autre propriété de Flexbox est qu'il est facile de modifier l'ordre des éléments. Supposons que vous ayez construit la disposition ci-dessus pour le client et qu'elle veut maintenant que .content apparaisse avant <nav>.

Habituellement, vous devez creuser dans le code source HTML et modifier l'ordre là-bas. Avec Flexbox, vous pouvez effectuer cette tâche entièrement via CSS. Définissez simplement la propriété .content S order sur -1 et la colonne de contenu sera devant.

.main {
  display: flex;
}

Dans ce cas, vous n'avez pas besoin de déclarer explicitement la valeur order pour les autres colonnes.

Code source HTML Utilisation de Flexbox indépendamment du style CSS

mais vos clients ne sont pas encore satisfaits. Elle espère que <footer> est le premier élément de la page, avant même <header>. Eh bien, Flexbox est à nouveau votre ami (bien que dans ce cas, il serait préférable d'éduquer vos clients plutôt que d'obéir). Étant donné que vous devez réorganiser les éléments internes et externes, vous devez définir la règle <div> pour display: flex. Notez que vous pouvez nidifier les conteneurs Flex dans une page Web pour obtenir les résultats que vous souhaitez. Parce que <header>, <main> et <footer> sont empilés verticalement, vous devez d'abord définir un contexte vertical, ce que vous pouvez faire rapidement avec flex-direction: column. De plus, la valeur de la <footer> est -1, il apparaîtra donc d'abord sur la page. C'est aussi simple que cela. order

.main {
  display: flex;
}

.content {
  order: -1;
}

Donc, si vous souhaitez modifier une ligne d'éléments en colonne ou vice versa, vous pouvez utiliser l'attribut

et le définir sur flex-direction ou column (row est la valeur par défaut): row

Cependant, plus la capacité est grande, plus la responsabilité est grande: N'oubliez pas que de nombreux visiteurs utiliseront le clavier pour parcourir votre site Web basé sur Flexbox, donc si l'ordre des éléments du code source HTML ne correspond pas à la commande affichée sur la Écran, l'accessibilité peut devenir un problème grave.

Comment aligner les éléments avec Flexbox

Flexbox peut également aligner ses enfants très directement horizontalement et verticalement.

Vous pouvez utiliser

pour appliquer le même alignement à tous les éléments du conteneur Flex. Si vous souhaitez définir différents alignements pour chaque projet, utilisez align-items. L'alignement des éléments dépend de la valeur de l'attribut align-self. Si sa valeur est flex-direction (c'est-à-dire que les éléments sont disposés horizontalement), l'alignement s'applique à l'axe vertical. Si row est défini sur flex-direction (c'est-à-dire que les éléments sont disposés verticalement), il est appliqué à l'axe horizontal. column

Par exemple, vous avez des formes que vous souhaitez les aligner différemment dans l'élément de conteneur. Vous avez besoin:

• Définissez la propriété align-self de chaque forme à la valeur appropriée. Les valeurs possibles comprennent: center, stretch (les éléments sont positionnés pour s'adapter à leurs conteneurs), flex-start, flex-end et baseline (les éléments sont positionnés au niveau de base de leurs conteneurs).
• Définissez l'élément de conteneur sur display: flex.
• Enfin, faites attention à l'attribut flex-direction sur le conteneur parent, car sa valeur affecte la façon dont les éléments enfants sont alignés.

<div class="example">
  <header>header content here</header>
  <main class="main">
    <nav>nav content here</nav>
    <div class="content">main content here</div>
    <aside>aside content here</aside>
  </main>
  <footer>footer content here</footer>
</div>

Si tous les éléments du conteneur parent doivent être alignés de la même manière, vous pouvez utiliser l'attribut align-items dans le conteneur parent. Les valeurs possibles incluent center, flex-start, flex-end, stretch (par défaut: l'élément est étiré pour s'adapter à son conteneur) et baseline (l'élément est positionné au niveau de base de son conteneur).

.main {
  display: flex;
}

Utilisez Flexbox pour aligner le contenu

Un autre attribut d'alignement est justify-content, ce qui est très pratique lorsque vous souhaitez allouer uniformément l'espace disponible entre plusieurs éléments.

Les valeurs acceptables incluent: center, flex-start, flex-end, space-between (il y a des espaces entre les éléments) et space-around (il y a des espaces avant, entre et après les éléments).

Par exemple, dans l'élément <main> du modèle HTML simple que vous avez utilisé, vous pouvez trouver trois éléments: <nav>, .content et <aside>. Actuellement, ils sont tous poussés à gauche de la page. Si vous voulez que ces trois éléments soient affichés d'une manière ou d'une autre afin de créer un espace entre eux au lieu de créer des espaces séparément aux extrémités gauche et droite des premier et dernier éléments, définissez .main (leur conteneur parent) réglé sur justify-content : space-between

.main {
  display: flex;
}

.content {
  order: -1;
}

Utilisez Flexbox pour ajuster la taille du projet

Utilisez l'attribut

, vous pouvez contrôler la longueur d'un élément par rapport aux autres éléments du conteneur Flex. flex

Cette propriété est l'abréviation de chacune des propriétés suivantes:

• - Un nombre qui spécifie combien un élément se développe par rapport aux autres éléments élastiques. flex-grow
• - Un nombre qui spécifie la quantité d'élément rétrécisse par rapport aux autres éléments élastiques. flex-shrink
• - La longueur de l'élément. Les valeurs acceptables incluent: flex-basis, auto ou des nombres suivis de "%", "px", "em" ou toute autre unité de longueur. inherit

Par exemple, pour obtenir trois colonnes de Monospace, définissez simplement

pour chaque colonne: flex: 1

.example {
  display: flex;
  flex-direction: column;
}

footer {
  order: -1;
}

Si vous avez besoin que la zone de contenu soit deux fois plus large que

et <nav>, définissez <aside> pour .content et laissez les deux autres à 1: flex: 2

Plus de ressources

Conclusion

Comme vous pouvez le voir, si vous avez besoin de contrôler l'emplacement des éléments sur votre site Web, Flexbox peut nous faciliter la vie. C'est très fiable, en faisant des astuces, des conteneurs pliants ou d'autres choses étranges que nous devons faire face à chaque jour.

Comme mentionné précédemment, la meilleure option pour la mise en page complète aujourd'hui est la grille CSS, mais il vaut toujours la peine de connaître la portée de la fonctionnalité de Flexbox. Flexbox est le meilleur pour aligner les éléments connexes dans une dimension, mais il peut également être une alternative pratique au travail de grille dans des navigateurs plus âgés si nécessaire.

FAQ sur CSS Flexbox

(des questions fréquemment posées doivent être ajoutées ici pour être cohérente avec le document d'origine)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!