Wie kann ich dafür sorgen, dass ein Flex-Element in einer neuen Zeile die volle Breite einnimmt?

Volle Breite der flexiblen Zeile für ein bestimmtes Element

Sie möchten erzwingen, dass das Element „Beschriftung“ die volle Breite unter zwei anderen flexiblen Zeilen einnimmt. positionierte Elemente. So erreichen Sie dies:

Normalerweise teilen sich Flex-Artikel den verfügbaren Platz gleichmäßig auf. Sie möchten jedoch, dass ein Element (die Beschriftung) den gesamten verbleibenden Platz in einer neuen Zeile einnimmt. Gehen Sie dazu wie folgt vor:

1. Elementbreite auf 100 % setzen: Weisen Sie dem Beschriftungselement eine Breite von 100 % zu oder verwenden Sie „Flex-Basis: 100 %“. Dadurch wird sichergestellt, dass der gesamte verbleibende horizontale Platz belegt wird.
2. Container-Wrap aktivieren: Passen Sie den übergeordneten Container an, um das Wrapping zu aktivieren (Flex-Wrap: Wrap). Dies zwingt Geschwisterelemente dazu, in neue Zeilen zu fließen, wenn der Platz knapp wird.

Hier ist der aktualisierte Code:

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

.error {
  flex: 0 0 100%;
  border: 1px dashed black;
}

Mit diesen Anpassungen erstreckt sich das Beschriftungselement über die gesamte Breite von die Zeile unter den anderen beiden Flex-Elementen, je nach Wunsch.

Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass ein Flex-Element in einer neuen Zeile die volle Breite einnimmt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!