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

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;
}

<div class="parent">
  <input type="range">

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!