Wie kann man adaptives Höhenlayout mit 2: 5: 3 -Skala mit CSS Flexbox erreichen?

Mit CSS Flexbox einfach adaptiv und hochlayouts mit 2: 5: 3 -Skala aufbauen

In diesem Artikel wird beschrieben, wie das CSS Elastic Box -Modell (Flexbox) verwendet wird, um einen Container mit dem genauen Höhenanteil der drei unteren Elemente zu erstellen, die 2: 5: 3 beträgt, und kann automatisch entsprechend der Bildschirmgröße angepasst werden, immer den Anteil beibehalten und die Höhe der übergeordneten Container füllen.

Wir benötigen einen Behälter mit drei Kinderelementen, und das Höhenverhältnis dieser drei Kinderelemente muss bei 2: 5: 3 beibehalten werden und kann bei verschiedenen Bildschirmauflösungen perfekt angepasst werden. Flexbox -Layouts können dies leicht erreichen.

Der Schlüssel besteht darin, display: flex und flex-direction: column des übergeordneten Containers, wodurch die untergeordneten Elemente vertikal angeordnet sind. Verwenden Sie dann das flex -Attribut, um den Anteil des Raums einzustellen, der von jedem untergeordneten Element besetzt ist: flex: 2 , flex: 5 und flex: 3 das das untergeordnete Element darstellt, das 2 Teile, 5 Teile und 3 Teile der Höhe des Elternbehälters besetzt. Die übergeordnete Containerhöhe wird automatisch entsprechend dem Inhalt eingestellt, um sicherzustellen, dass die untergeordneten Elemente korrekt und adaptiv sind. Für die vertikale Zentrierung verwendeten wir align-items: center .

Der folgende Code -Snippet zeigt die Implementierung:

 .Container {
  Anzeige: Flex;
  Flex-Richtung: Säule;
  Ausrichtung: Zentrum; /* vertikales Zentrum*///
  Höhe: 100VH; /* Es nimmt die volle Ansichtsfensterhöhe ein und kann gemäß den tatsächlichen Bedingungen geändert werden*/
}

.Item1 {
  Flex: 2;
}

.Item2 {
  Flex: 5;
}

.Item3 {
  Flex: 3;
}

Um den Effekt intuitiver zu zeigen, geben wir ein vollständiges HTML -Beispiel an:

 


  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox -Layout</title>
  <style>
    .container {
      height: 100vh;
      width: 100px;
      background: #000;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .item1 {
      flex: 2;
      background: pink;
    }

    .item2 {
      flex: 5;
      background-color: blue;
    }

    .item3 {
      flex: 3;
      background-color: cadetblue;
    }
  </style>


  <div class="container">
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"></div>
  </div>

Dieser Code erstellt ein sehr adaptives Layout mit einem Verhältnis von 2: 5: 3. Die übergeordnete Containerhöhe wird auf 100vh eingestellt, so dass sie die Ansichtsfensterhöhe nimmt, die Sie entsprechend den tatsächlichen Anforderungen einstellen können.

Das obige ist der detaillierte Inhalt vonWie kann man adaptives Höhenlayout mit 2: 5: 3 -Skala mit CSS Flexbox erreichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!