Wie lässt sich ein Flex-Element über die gesamte Breite einer Zeile unter anderen Flex-Elementen erstrecken?

Flex-Elemente in voller Breite in einer Reihe

Sie möchten die ersten beiden untergeordneten Elemente in einer einzigen Zeile beibehalten und gleichzeitig das dritte Element darunter positionieren es auf voller Breite und nutzen Sie dabei den Flex Layout.

Frage:

Wie erzwingen Sie, dass sich das „Label“-Element über die gesamte Breite der Zeile unter den ersten beiden flexibel positionierten Elementen erstreckt?

Antwort:

Um zu erzwingen, dass sich ein Flex-Element über eine ganze Zeile erstreckt, wenden Sie die Breite an: 100 % oder Flex-Basis: 100 % und Wrap auf dem Behälter aktivieren. Dies wird durch die folgenden Anpassungen erreicht:

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

.error {
  flex: 0 0 100%; /* flex-grow, flex-shrink, flex-basis */
  border: 1px dashed black;
}

Mit diesen Änderungen nimmt das „Label“-Element die volle Breite unter den anderen beiden Elementen ein, während die gewünschte Flex-Positionierung für die ersten beiden untergeordneten Elemente beibehalten wird.

Das obige ist der detaillierte Inhalt vonWie lässt sich ein Flex-Element über die gesamte Breite einer Zeile unter anderen Flex-Elementen erstrecken?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!