So implementieren Sie ein zweispaltiges Layout über das CSS Flex-Layout-CSS-Tutorial-php.cn

So implementieren Sie ein zweispaltiges Layout über das CSS Flex-Layout

PHPz

Freigeben： 2023-09-26 10:54:37

Original

1561 Leute haben es durchsucht

如何通过Css Flex 弹性布局实现两栏布局

So implementieren Sie ein zweispaltiges Layout mit CSS Flex Flexible Layout

CSS Flex Flexible Layout ist eine moderne Layouttechnologie, die den Prozess des Webseitenlayouts vereinfachen kann und es Designern und Entwicklern ermöglicht, auf einfache Weise flexible und an verschiedene Layouts anpassbare Designs zu erstellen für jede Bildschirmgröße. Unter anderem ist die Implementierung eines zweispaltigen Layouts eine der häufigsten Anforderungen im Flex-Layout. In diesem Artikel stellen wir vor, wie Sie mit dem elastischen CSS Flex-Layout ein einfaches zweispaltiges Layout implementieren und stellen spezifische Codebeispiele bereit.

Verwenden von Flex-Containern und -Elementen

Bei der Verwendung von Flex-Layout benötigen wir einen übergeordneten Container, um unseren Layout-Inhalt zu umschließen. Dieser Container wird als Flex-Container bezeichnet. Flex-Container können erstellt werden, indem die Anzeigeeigenschaft auf „flex“ oder „inline-flex“ gesetzt wird. Konkret können wir einen Flex-Container mit dem folgenden Code erstellen:

<div class="container">
  <!-- 布局的内容 -->
</div>

Nach dem Login kopieren

Als nächstes müssen wir zwei untergeordnete Elemente im Flex-Container erstellen, der unser zweispaltiges Layout darstellt. Diese Teilprojekte werden Flex-Projekte genannt. Im Flex-Container können wir die Größe und Elastizität jedes Elements steuern, indem wir die Flex-Eigenschaft auf „1“ oder andere Werte setzen. Konkret können wir zwei Flex-Projekte mit dem folgenden Code erstellen:

<div class="container">
  <div class="item">
    <!-- 左栏内容 -->
  </div>
  <div class="item">
    <!-- 右栏内容 -->
  </div>
</div>

Nach dem Login kopieren

Flex-Layout festlegen

Um ein zweispaltiges Layout zu erreichen, müssen wir die relevanten Eigenschaften des Flex-Containers und des Projekts festlegen. Zuerst müssen wir die untergeordneten Elemente im Flex-Container horizontal anordnen. Dies kann erreicht werden, indem die Flex-Direction-Eigenschaft des Containers auf „row“ gesetzt wird. Konkret können wir die Eigenschaften des Flex-Containers über den folgenden Code festlegen:

.container {
  display: flex;
  flex-direction: row;
}

Nach dem Login kopieren

Als nächstes können wir den von jedem Element belegten Platz steuern, indem wir die Flex-Eigenschaft des Elements festlegen. Hier können wir relative Einheiten wie „fr“ (kurz für „Fractional Flex-Grow Property“) verwenden, um den von den Kindern belegten Anteil zu bestimmen. Konkret können wir die Eigenschaften von Flex-Elementen über den folgenden Code festlegen:

.item {
  flex: 1;
}

Nach dem Login kopieren

Hier verwenden wir flex: 1, um den von jedem Element eingenommenen Platz auf ein gleiches Verhältnis festzulegen. Wenn wir möchten, dass die linke Spalte mehr Platz einnimmt, können wir den Flex-Wert des entsprechenden Elements anpassen. Beispielsweise können wir für die linke Spalte die Flex-Eigenschaft auf „2“ und für die rechte Spalte die Flex-Eigenschaft auf „1“ festlegen.

Vollständiges Codebeispiel

Hier ist ein vollständiges Codebeispiel, das zeigt, wie man ein einfaches zweispaltiges Layout mit CSS Flex implementiert:

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      flex-direction: row;
    }
    
    .item {
      flex: 1;
      padding: 20px;
    }
    
    .left {
      background-color: #f1f1f1;
    }
    
    .right {
      background-color: #dddddd;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item left">
      <!-- 左栏内容 -->
    </div>
    <div class="item right">
      <!-- 右栏内容 -->
    </div>
  </div>
</body>
</html>

Nach dem Login kopieren

In diesem Beispiel haben wir einfache CSS-Stile verwendet, um die Hintergrundfarbe der einzelnen Elemente festzulegen Unterscheiden Sie zwischen der linken und rechten Spalte. Sie können zusätzliche Stile hinzufügen, um Ihr Layout entsprechend Ihren Anforderungen zu verschönern.

Zusammenfassung

Durch die Verwendung des CSS Flex-Layouts können wir problemlos ein zweispaltiges Layout implementieren. Setzen Sie einfach die Anzeigeeigenschaft des Flex-Containers auf „flex“, dann die Flex-Direction-Eigenschaft auf „row“ und dann die Flex-Eigenschaft des Flex-Elements auf den entsprechenden Wert, um ein flexibles und anpassungsfähiges Layout zu erreichen. Das Obige ist ein einfaches Beispiel. Sie können den Code an Ihre Bedürfnisse und Ihr Design anpassen. Ich hoffe, dass dieser Artikel Ihnen hilft, das CSS Flex-Layout zu verstehen und zu verwenden!

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein zweispaltiges Layout über das CSS Flex-Layout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!