Astuce rapide: comment les marges Z-Index et Auto fonctionnent dans Flexbox

Flexbox est largement utilisé pour résoudre des problèmes de disposition communs tels que les pieds de pied et les colonnes de contour. En plus de ces fonctionnalités, il offre d'autres fonctionnalités pratiques moins populaires. Explorons deux d'entre eux!

points clés

• Flexbox permet à l'attribut position d'être appliqué aux éléments non localisés (tels que les projets Flex) même si l'attribut static du projet Flex est défini sur z-index. Cela peut être utilisé pour contrôler l'ordre d'empilement des éléments.
• Les marges automatiques dans Flexbox peuvent être utilisées pour implémenter l'alignement personnalisé des éléments Flex le long de la broche. Ils absorbent l'espace supplémentaire et repoussent les projets adjacents, permettant un modèle d'interface utilisateur unique.
• bien qu'il semble visuellement similaire, en utilisant des marges automatiques et des propriétés flex-grow peuvent produire des résultats de disposition différents, en particulier en termes de largeur ou de hauteur calculée de l'élément. Il est crucial de choisir la méthode qui correspond le mieux à la disposition souhaitée.

flexbox et z-index

Vous savez peut-être déjà que l'attribut z-index ne convient que pour le positionnement des éléments. Par défaut, l'attribut position de tous les éléments est static et n'est pas positionné. Lorsque l'attribut position d'un élément est défini sur relative, absolute, fixed, ou sticky, l'élément est l'élément de "positionnement".

Cependant, les éléments non localisés (tels que les éléments flexibles) peuvent également recevoir des attributs z-index. La spécification de disposition de la boîte élastique CSS souligne:

Les projets Flex sont dessinés exactement de la même manière que les blocs en ligne [CSS21], sauf que l'ordre du document est modifié dans l'ordre au lieu de l'ordre du document d'origine, et même si position est static, la valeur de la valeur de z-index (pas auto) Crée également un contexte d'empilement.

Pour comprendre ce comportement, considérez l'exemple suivant:

lien de démonstration de codepen

Ici, nous définissons deux éléments: .front élément et .back élément. .front L'élément a un élément enfant, une boîte avec le numéro "1". .front L'élément lui-même est absolument positionné. Plus précisément, son attribut position est fixed et couvre l'intégralité de la fenêtre.

Notre élément .back est un conteneur flexible. Il contient deux éléments enfants - une boîte avec les nombres "2" et "3". Sur la base de ce que nous avons discuté ci-dessus, nous pouvons définir l'attribut z-index de son projet Flex, même s'ils ne positionnent pas des éléments (c'est-à-dire leur attribut position est static).

Notez que lorsque nous ajoutons z-index: 2 au projet Flex en cliquant sur le bouton dans la démo ci-dessus, ils sont en haut de l'élément .front.

flexbox et marges automatiques

Nous pouvons résoudre des modèles d'interface utilisateur courants en appliquant des marges automatiques aux projets flexibles. Tout d'abord, supposons que nous voulons construire cette disposition de titre typique:

Pour le construire, nous utiliserons Flexbox. Pas besoin de flottant, de largeur fixe ou quelque chose comme ça.

C'est notre marque:

<code class="language-html"><header>
  <nav>
    <h1 class="logo">LOGO</h1>
    <ul class="menu">
      <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">About</a></li>
      <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Projects</a></li>
      <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Contact</a></li>
    </ul>
    <ul class="social">
      <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Facebook</a></li>
      <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Twitter</a></li>
    </ul>
  </nav>
</header></code>

Notre CSS est le suivant:

<code class="language-css">header {
  background: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b333;
}

nav {
  display: flex;
  align-items: center;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.menu {
  margin-left: 60px;
  margin-right: auto;
}</code>

Dans cet exemple, notre élément nav est le conteneur Flex, et le logo, le menu principal et le menu social sont les éléments Flex. Comme on peut le voir à partir de la visualisation précédente, les deux premiers éléments flexibles sont alignés le long de l'axe principal sur le côté gauche du conteneur flexible. Au lieu de cela, le menu social s'aligne le long de l'axe principal avec le bord droit de son élément parent.

Une façon d'atteindre cet alignement personnalisé est d'ajouter margin-right: auto au menu principal. Avec une seule ligne de code, nous pouvons remplacer l'alignement par défaut du menu social et le pousser complètement à droite de son conteneur. De même, nous utilisons la propriété align-self pour remplacer l'alignement par défaut de l'élément Flex le long de l'axe transversal.

En plus des marges automatiques, nous pouvons également utiliser une deuxième méthode pour construire la disposition requise. Tout d'abord, nous supprimons la propriété margin-right du menu principal et y ajoutons flex-grow: 1.

Même si les résultats se ressemblent dans les deux cas, il y a une grande différence. Avec la première solution, notre menu a sa largeur calculée initiale. Par exemple, lorsque la largeur de la fenêtre est de 1100px, la largeur du menu ressemblera à ceci:

D'un autre côté, avec la deuxième solution, la largeur du menu s'agrandira car nous avons spécifié flex-grow: 1. Lorsque la largeur de la fenêtre est de 1100px, sa largeur correspondante est la suivante:

lien de démonstration de codepen

Supposons maintenant que nous voulons modifier la mise en page du titre. Voici la nouvelle disposition requise:

La marque

reste la même. Nous avons juste besoin d'apporter des modifications dans CSS:

<code class="language-css">nav {
  background: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b333;
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 180px;
  padding: 20px;
  box-sizing: border-box;
}

.menu {
  margin-top: 60px;
  margin-bottom: auto;
}</code>

Dans cet exemple, notez que le menu social s'aligne sur le bord inférieur de son élément parent. Encore une fois, cela se fait en ajoutant margin-bottom: auto au menu principal. Bien sûr, nous pouvons également utiliser flex-grow: 1, mais cela augmentera la hauteur du menu.

lien de démonstration de codepen

Une autre chose à noter est que si nous définissons la propriété

dans tous les exemple, nous ne verrons aucune différence visuelle. Cela se produit parce que nous utilisons des marges automatiques pour aligner les éléments flexibles. L'attribut justify-content ne prendra effet que lorsque nous supprimons la marge automatique. Selon la spécification: justify-content

Si l'espace libre est attribué à des marges automatiques, la propriété d'alignement ne fonctionnera pas dans cette dimension, car les marges prendront de la place dans tout l'espace libre gauche après Flex.

Ensuite, créons une nouvelle variante du titre:

Cela peut être facilement réalisé en réglant

dans un conteneur flexible, sans aucun doute. Cependant, encore une fois, nous avons pu utiliser des marges automatiques pour produire la même disposition. Tout ce que nous avons à faire est d'appliquer justify-content: space-between au menu principal. margin: 0 auto

lien de démonstration de codepen

Conclusion

Dans cet article, nous introduisons deux conseils Flexbox peu connus. Avant de terminer, passons en revue:

Même si la propriété
• du projet Flex est position, nous pouvons appliquer l'attribut static au projet Flex. z-index
Nous pouvons utiliser des marges automatiques pour obtenir un alignement personnalisé des éléments flexibles le long de la broche.

Si vous utilisez l'un de ces conseils dans votre projet, faites-le nous savoir dans les commentaires ci-dessous.

FAQ pour l'index z et les marges automatiques dans Flexbox

Qu'est-ce que Z-Index dans Flexbox? Comment ça marche?

est un attribut CSS qui contrôle l'ordre d'empilement vertical des éléments qui se chevauchent. Dans Flexbox, la propriété Z-Index peut être utilisée pour contrôler l'ordre dans lequel les éléments Flex sont le long de l'axe Z. Il est important de noter que Z-Index ne convient qu'aux éléments de positionnement. La valeur par défaut est Z-Index, ce qui signifie que l'ordre d'empilement est égal à son élément parent. Si un nombre positif est attribué à auto, l'élément sera au-dessus de l'élément parent. Z-Index

Pourquoi mon indice Z ne fonctionne-t-il pas dans Flexbox?

votre

ne fonctionne pas dans Flexbox pour plusieurs raisons. Une raison courante est que l'attribut Z-Index ne convient qu'aux éléments de positionnement. Si votre élément n'est pas positionné (c'est-à-dire que sa valeur Z-Index n'est pas position, relative ou absolute), alors fixed n'aura aucun effet. Une autre raison peut être que l'élément parent a un ensemble de valeur Z-Index, ce qui affecte l'ordre d'empilement des éléments enfants. Z-Index

Comment fonctionne les marges automatiques dans Flexbox?

Dans Flexbox, les marges automatiques ont des fonctionnalités spéciales. Ils peuvent absorber l'espace supplémentaire et repousser les projets adjacents. Lorsque vous définissez une marge automatique sur un projet Flex, il prend tout espace restant le long de la broche, repoussant efficacement d'autres projets. Ceci est très utile pour aligner les éléments dans un conteneur flexible.

Puis-je utiliser Z-Index pour contrôler l'ordre des éléments flexibles?

Oui, vous pouvez utiliser la propriété Z-Index pour contrôler l'ordre des éléments flexibles le long de l'axe Z. Cependant, n'oubliez pas que Z-Index ne convient qu'aux éléments de positionnement. Si votre projet Flex n'est pas positionné, Z-Index n'aura aucun effet.

Pourquoi mon projet Flex n'est-il pas correctement aligné avec les marges automatiques?

Si votre projet Flex n'est pas correctement aligné avec les marges automatiques, cela peut être dû à plusieurs raisons. Une raison courante est que le conteneur flexion a une hauteur ou une largeur fixe, ce qui limite l'espace disponible pour les marges. Une autre raison pourrait être que le projet Flex a une taille fixe, ce qui empêche la marge d'absorber l'espace supplémentaire.

Comment résoudre le problème Z-Index dans Flexbox?

Résoudre le problème Z-Index dans Flexbox implique généralement de s'assurer que votre élément est positionné et que la valeur Z-Index est définie correctement. Si votre Z-Index ne fonctionne pas, vérifiez si votre élément est positionné. Sinon, vous pouvez le localiser en définissant les valeurs relative, absolute ou fixed. Vérifiez également les valeurs position de l'élément parent, car ils affectent l'ordre d'empilement des éléments enfants. Z-Index

Puis-je utiliser des marges automatiques pour centrer l'élément Flex?

Oui, vous pouvez utiliser des marges automatiques pour centrer les éléments flexibles dans le conteneur Flex. En définissant des marges automatiques de tous les côtés du projet Flex, il sera centré verticalement et horizontalement dans le conteneur Flex.

Quelle est la valeur par défaut de l'index z dans Flexbox?

La valeur par défaut de

dans Z-Index dans Flexbox est auto. Cela signifie que l'ordre d'empilement de l'élément Flex est égal à son élément parent. Si vous souhaitez modifier l'ordre d'empilement, vous pouvez attribuer des nombres positifs ou négatifs à Z-Index.

Comment Z-Index affecte-t-il l'ordre d'empilement des éléments?

Z-Index Influencer l'ordre d'empilement des éléments en déterminant quels éléments apparaissent au-dessus d'autres éléments. Des éléments avec des valeurs Z-Index plus élevés apparaîtront au-dessus des éléments avec des valeurs Z-Index plus faibles. Si deux éléments ont le même Z-Index, les éléments qui apparaissent après HTML apparaîtront en haut.

Puis-je utiliser Z-Index avec Flexbox pour créer des éléments qui se chevauchent?

Oui, vous pouvez utiliser l'attribut Z-Index avec Flexbox pour créer des éléments qui se chevauchent. En attribuant différentes valeurs Z-Index à votre projet Flex, vous pouvez contrôler quels éléments apparaissent au-dessus d'autres projets, créant des effets de chevauchement. N'oubliez pas que Z-Index ne convient que pour le positionnement des éléments, vous devez donc positionner votre projet Flex pour que Z-Index prenne effet.

Veuillez noter que j'ai gardé tous les liens d'image dans le format d'origine et que j'ai pseudo-original le texte, s'efforçant de rendre l'article expressif plus diversifié sans changer la signification d'origine. Étant donné que le lien Codepen n'est pas accessible, j'ai remplacé le lien dans le texte d'origine par " Codepen Demo Link ". Veuillez le remplacer par le lien réel vous-même.

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!