Heim > Web-Frontend > CSS-Tutorial > Wie kann ein Flex-Element die gesamte Zeile unter anderen Flex-Elementen umfassen?

Wie kann ein Flex-Element die gesamte Zeile unter anderen Flex-Elementen umfassen?

Susan Sarandon
Freigeben: 2024-12-11 03:32:10
Original
400 Leute haben es durchsucht

How to Make a Flex Item Span the Entire Row Below Other Flex Items?

Flex-Element in voller Breite so erzwingen, dass es sich über die gesamte Zeile erstreckt

Problem:

In a Beim Flex-Layout besteht das Ziel darin, die ersten beiden untergeordneten Elemente in einer einzelnen Zeile beizubehalten, während das dritte Element unten eine eigene Zeile voller Breite einnimmt. Die Herausforderung ergibt sich aus dem Wunsch, die Flex-Grow- und Flex-Shrink-Eigenschaften für die ersten beiden Elemente zu nutzen und gleichzeitig sicherzustellen, dass sich das dritte Element über die gesamte Breite des übergeordneten Containers erstreckt und unter den ersten beiden erscheint.

Lösung:

Um zu erzwingen, dass das dritte Element 100 % der Breite überspannt und in einer neuen Zeile unter dem anderen erscheint zwei:

  • Flex-Basis festlegen: 100 % für das dritte Element. Dadurch wird sichergestellt, dass es den gesamten verfügbaren Platz in seiner Zeile einnimmt und in eine neue Zeile verschoben wird.
  • Implementieren Sie „Flex-Wrap: Wrap“ für den übergeordneten Container. Dadurch können flexible Elemente in mehrere Reihen eingefügt werden, sodass Elemente untergebracht werden können, die nicht in die Breite der aktuellen Zeile passen.

Beispielcode:

.parent {
  display: flex;
  flex-wrap: wrap;
}

#range, #text {
  flex: 1;
}

.error {
  flex: 0 0 100%; /* flex-grow, flex-shrink, flex-basis */
  border: 1px dashed black;
}
Nach dem Login kopieren
<div class="parent">
  <input type="range">
Nach dem Login kopieren

Bei diesem Ansatz belegen die ersten beiden Elemente dieselbe Zeile und teilen sich die verfügbare Breite, während das dritte Element die gesamte Breite des übergeordneten Containers einnimmt und in einer neuen Zeile positioniert wird unten.

Das obige ist der detaillierte Inhalt vonWie kann ein Flex-Element die gesamte Zeile unter anderen Flex-Elementen umfassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage