communauté

Apprendre

Bibliothèque d'outils

Outils d'IA

Loisirs

Français

Maison > interface Web > tutoriel CSS > Aligner les éléments Flex au début d'un conteneur à l'aide de CSS

Aligner les éléments Flex au début d'un conteneur à l'aide de CSS

PHPz

Libérer： 2023-09-11 18:29:02

avant

723 Les gens l'ont consulté

使用 CSS 将容器开头的 Flex 项目对齐

Alignez les éléments flexibles au début en utilisant la propriété justify-content avec la valeur flex-start.

Vous pouvez essayer d'exécuter le code suivant pour implémenter la valeur flex-start

Exemple

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         .mycontainer {
            display: flex;
            background-color: red;
            justify-content: flex-start;
         }
         .mycontainer > div {
            background-color: orange;
            text-align: center;
            line-height: 60px;
            font-size: 30px;
            width: 100px;
            margin: 5px;
         }
      </style>
    </head>
   <body>
      <h1>Result</h1>
      <div class = "mycontainer">
         <div>Rank1</div>
         <div>Rank2</div>
         <div>Rank3</div>
         <div>Rank4</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：Comment utiliser la propriété fit-content de CSS3 pour obtenir un alignement horizontal Article suivant：Apprenez les connaissances CSS3 flexbox, comment organiser rapidement les éléments d'une page Web ?

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