Comment implémenter la conversion de disposition dynamique de la disposition horizontale à verticale lorsque la largeur totale d'un élément de liste dépasse le seuil en utilisant CSS seul?

CSS pur implémenter la conversion dynamique de la disposition des éléments de liste: horizontal à vertical

De nombreux développeurs frontaux sont confrontés au défi de régler dynamiquement la direction de disposition de la liste en fonction de la largeur totale de l'élément de liste, par exemple, lorsque la largeur totale dépasse un certain seuil, passant de la disposition horizontale à verticale. Cet article montrera comment réaliser cet effet à l'aide de CSS uniquement et analysera un cas spécifique.

Supposons que nous ayons une liste non ordonnée<ul></ul> , y compris plusieurs<li> Éléments, chacun<li> La largeur n'est pas fixe. Quand tout<li> Lorsque la largeur totale d'un élément dépasse 300 pixels, vous voulez que la liste soit convertie de horizontale à verticale. Nous pouvons facilement résoudre ce problème en tirant parti de la disposition Flexbox de CSS. La clé réside dans flex-wrap: wrap; attribut. Cette propriété permet aux éléments de s'enrouler automatiquement lorsqu'ils atteignent la limite du récipient, permettant une transition horizontale à verticale lisse.

Le code CSS suivant montre comment implémenter cette transformation de mise en page dynamique:

 * {
  rembourrage: 0;
  marge: 0;
  Dimensionnement en boîte: Border-Box; / * contient la marge et la frontière intérieures dans la largeur totale de l'élément * /
}

ul {
  Affichage: flex;
  wrap flex: enveloppement;
  Largeur: 300px;
  max-height: 400px; / * Définissez la hauteur maximale pour empêcher le contenu de déborder * /
  débordement-y: auto; / * Ajouter une barre de défilement pour faciliter la visualisation des pièces excessives * /
}

li {
  Flex-Crow: 1; / * Autoriser le projet à occuper l'espace disponible * /
  rembourrage: 8px;
}

Ce code d'abord<ul></ul> L'élément est réglé sur un conteneur flexible et activer flex-wrap: wrap; propriété pour permettre à la liste des éléments de s'envelopper automatiquement. width: 300px; limite la largeur totale de la liste comme seuil. max-height et overflow-y: auto Assurez-vous que la barre de défilement apparaît lorsque le contenu dépasse la hauteur définie. flex-grow: 1; Assurez-vous que chacun<li> Les éléments distribuent uniformément l'espace restant dans la même ligne. box-sizing: border-box; S'applique à tous les éléments pour s'assurer que la marge intérieure et la frontière n'affectent pas le calcul de la largeur totale de l'élément.

quand<li> Lorsque la largeur totale des éléments dépasse 300 pixels, ils se termineront automatiquement à la ligne suivante, réalisant ainsi une disposition verticale. Avec ce code CSS concis, nous implémentons la conversion de mise en page dynamique de l'horizontal à vertical sans aucun code JavaScript.

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!