Wie richtet man vertikale Inhalte in Flexbox-Spalten horizontal aus?

Ausgleich der Körpergröße von Kindern verschiedener Eltern mit Flexbox

Frage:

In a Zweispaltiges Layout, bei dem jede Spalte Inhalte unterschiedlicher Länge enthält. Wie können wir sicherstellen, dass die Listen in beiden Spalten horizontal ausgerichtet bleiben, ohne die mobile Optimierung von Bootstrap zu beeinträchtigen? Idealerweise sollte eine Lösung Flexbox nutzen und JavaScript vermeiden.

Antwort:

Um dies ohne JavaScript zu erreichen, müssen wir alle Inhaltselemente (Überschriften, Absätze usw.) erstellen Listen) Geschwister im Markup.

Wenn die Bildschirmbreite die Anzeige von Spalten nebeneinander zulässt, müssen diese Elemente neu angeordnet werden, um die richtige Ausrichtung beizubehalten:

• Medienabfrage:

  <code class="css">@media (min-width: 768px) {
    // Flexbox rules
  }</code>

• Flexbox-Konfiguration:

  <code class="css">.content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  
  .content > * {
    flex-basis: calc(50% - 30px); // Adjust for gutters
  }</code>

• Elementreihenfolge:

  <code class="css">.content h2 { 
    order: 0; // Heading (row 1)
  }
  
  .content p { 
    order: 1; // Paragraphs (row 2)
  }
  
  .content p + p { 
    order: 2; // Second paragraph (row 3)
  }
  
  .content ul { 
    order: 3; // List (row 4)
  }</code>

Überlegungen:

• Ränder: Zu Fügen Sie Ränder hinzu, verwenden Sie eine Kombination von Randeigenschaften für die Elemente und passen Sie sie mit der Medienabfrage an, um den unterschiedlichen Stapelkonfigurationen Rechnung zu tragen.

Aktualisierter Code:

Ein funktionierendes Beispiel finden Sie im aktualisierten Codepen:

[Codepen-Link]

Das obige ist der detaillierte Inhalt vonWie richtet man vertikale Inhalte in Flexbox-Spalten horizontal aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!