So implementieren Sie ein benutzerdefiniertes Höhenlayout mit 2: 5: 3 -Skala und passen Sie sich mit CSS Flexbox an verschiedene Auflösungen an?

CSS Flexbox implementiert adaptives hochproportionales Layout

In diesem Artikel wird beschrieben, wie CSS Flexbox verwendet wird, um ein Layout mit einem Höhenverhältnis von 2: 5: 3 zu erstellen und es bei verschiedenen Auflösungen konsistent zu halten. Dieses Layout ist im Webdesign sehr praktisch und ermöglicht eine flexible Zuweisung der Höhe des Seiteninhaltsblocks.

Die Kerntechnologie ist das Flexbox Elastic Box -Modell von CSS. Durch Einstellen display: flex -Attribut des übergeordneten Containers und flex -Attributs des untergeordneten Elements können Sie den Höhenanteil des untergeordneten Elements problemlos steuern.

Stellen Sie zunächst den übergeordneten Containerstil so ein, dass er zu einem Flex -Container wird:

 .Container {
  Anzeige: Flex;
  Flex-Richtung: Säule; /* Vertikale Anordnung von Kinderelementen*/
  Höhe: 100VH; /* Besetzen Sie Ansichtsfenster*///*
  Ausrichtung: Stretch; /* Kinderelemente unterstützen die übergeordnete Containerbreite*/
}

flex-direction: column; Stellen Sie sicher, dass die Kinderelemente vertikal angeordnet sind; height: 100vh; align-items: stretch; Stellen Sie sicher, dass die untergeordneten Elemente voll mit dem Elternbehälter sind.

Stellen Sie dann das flex -Attribut des untergeordneten Elements fest, um die Höhenskala zu definieren:

 .box1 {flex: 2; }
.box2 {flex: 5; }
.box3 {flex: 3; }

flex: 2; , flex: 5; , flex: 3; definiert jeweils das Höhenverhältnis der drei Kinderelemente auf 2: 5: 3. Flexbox weist automatisch den verfügbaren Speicherplatz basierend auf dieser Skala zu.

Hier ist ein vollständiges HTML -Beispiel:

 


  <title>Flexbox -Höhenverhältnis</title>
  <style>
    .container {
      display: flex;
      flex-direction: column;
      height: 100vh;
      align-items: stretch;
    }
    .box1 { flex: 2; background-color: lightpink; }
    .box2 { flex: 5; background-color: lightblue; }
    .box3 { flex: 3; background-color: lightgreen; }
  </style>


  <div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>

Durch diese Methode wird das Höhenverhältnis der drei Subelemente immer bei 2: 5: 3 gehalten, unabhängig von der Größe des Browserfensters, wodurch ein perfektes adaptives Layout erreicht wird.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein benutzerdefiniertes Höhenlayout mit 2: 5: 3 -Skala und passen Sie sich mit CSS Flexbox an verschiedene Auflösungen an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!