communauté

Apprendre

Bibliothèque d'outils

Outils d'IA

Loisirs

Français

Maison > interface Web > tutoriel CSS > Le rôle de la valeur de ligne de la propriété CSS flex-direction

Le rôle de la valeur de ligne de la propriété CSS flex-direction

王林

Libérer： 2023-08-28 19:09:02

avant

721 Les gens l'ont consulté

CSS flex-direction属性行值的作用

Utilisez la propriété flex-direction et la valeur row pour définir les éléments flexibles horizontalement.

Vous pouvez essayer d'exécuter le code suivant pour implémenter les valeurs de ligne

Exemple

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         .mycontainer {
            display: flex;
            flex-direction: row;
            background-color: orange;
         }
         .mycontainer > div {
            background-color: white;
            text-align: center;
            line-height: 40px;
            font-size: 25px;
            width: 100px;
            margin: 5px;
         }
      </style>
   </head>
   <body>
      <h1>Quiz</h1>
      <div class = "mycontainer">
         <div>Q1</div>
         <div>Q2</div>
         <div>Q3</div>
         <div>Q4</div>
         <div>Q5</div>
         <div>Q6</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：Utilisation des propriétés de visibilité CSS Article suivant：Comment résoudre le problème de débordement dans la mise en page CSS Flex ?

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