communauté

Apprendre

Bibliothèque d'outils

Outils d'IA

Loisirs

Français

Maison > interface Web > tutoriel CSS > Utilisez CSS pour afficher la ligne flexible à la fin du conteneur

Utilisez CSS pour afficher la ligne flexible à la fin du conteneur

王林

Libérer： 2023-09-07 12:41:02

avant

1053 Les gens l'ont consulté

使用 CSS 显示容器末尾的伸缩线

Utilisez l'attribut align-content et définissez la valeur sur flex-end pour définir la ligne flexible à la fin.

Exemple

Vous pouvez essayer d'exécuter le code suivant pour obtenir flex-endvalue

Démo en ligne

<!DOCTYPE html>
<html>
   <head>
      <style>
         .mycontainer {
            display: flex;
            height: 200px;
            background-color: blue;
            align-content: flex-end;
            flex-wrap: wrap;
         }
         .mycontainer > div {
            background-color: orange;
            text-align: center;
            line-height: 60px;
            font-size: 30px;
            width: 100px;
            margin: 5px;
         }
       </style>
   </head>
   <body>
      <h1>Queue</h1>
      <div class = "mycontainer">
         <div>Q1</div>
         <div>Q2</div>
         <div>Q3</div>
         <div>Q4</div>
         <div>Q5</div>
         <div>Q6</div>
         <div>Q7</div>
         <div>Q8</div>
      </div>
   </body>
</html>

Copier après la connexion

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!

Article précédent：L'utilisation des attributs de style de transition en CSS Article suivant：Comment créer une boîte remplie de couleurs en HTML/CSS ?

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur