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

Flex-Element erzwingen, dass es sich über die gesamte Zeilenbreite erstreckt

Beim Arbeiten mit Flex-Layouts ist es oft notwendig, Elemente systematisch zu positionieren. In diesem Fall besteht das Ziel darin, die ersten beiden untergeordneten Elemente in derselben Zeile auszurichten und gleichzeitig das dritte Element darunter in voller Breite zu platzieren.

Lösung mit Flex-Eigenschaften

Um dies zu erreichen, legen Sie fest Folgende Eigenschaften gelten für die ersten beiden Elemente:

flex-grow: 1;
flex-shrink: 1;

Das bedeutet, dass sie sich ausdehnen und verkleinern, um den verfügbaren Platz gleichmäßig auszufüllen.

Für das dritte Element verwenden Sie die folgenden Eigenschaften:

flex-grow: 0;
flex-shrink: 0;
flex-basis: 100%;

Dadurch wird sichergestellt, dass es die ursprüngliche Größe beibehält, nicht schrumpft und die volle Breite des Containers einnimmt, wenn genügend Platz vorhanden ist.

Einbindung dynamisch hinzugefügter Elemente

Da das Label-Element programmgesteuert hinzugefügt wird, ist es wichtig, das CSS entsprechend anzupassen. Durch Festlegen der folgenden Eigenschaften für das Beschriftungselement erstreckt es sich über die gesamte Breite unterhalb der ersten beiden Elemente:

display: block;
width: 100%;

Endgültiges Code-Snippet

Hier ist ein Beispiel, das diese Lösungen enthält:

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

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

#range, #text {
  flex: 1;
}

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

Dies sollte dazu führen, dass sich das Beschriftungselement 100 % der Breite unterhalb der ersten beiden Elemente erstreckt und dabei das gewünschte beibehalten wird Layout.

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