Heim > Artikel > Web-Frontend > Richten Sie Flex-Elemente mithilfe von CSS am Anfang eines Containers aus

Richten Sie Flex-Elemente mithilfe von CSS am Anfang eines Containers aus

PHPznach vorne: 2023-09-11 18:29:02659Durchsuche

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

Richten Sie Flex-Elemente am Anfang aus, indem Sie die Eigenschaft justify-content mit dem Wert flex-start verwenden.

Sie können versuchen, den folgenden Code auszuführen, um den Flex-Start-Wert zu implementieren

Beispiel

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>

Das obige ist der detaillierte Inhalt vonRichten Sie Flex-Elemente mithilfe von CSS am Anfang eines Containers aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css flex

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：So erreichen Sie eine horizontale Ausrichtung mithilfe der CSS3-Eigenschaft „fit-content“.Nächster Artikel：So erreichen Sie eine horizontale Ausrichtung mithilfe der CSS3-Eigenschaft „fit-content“.

In Verbindung stehende Artikel

Mehr sehen