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:
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!