Erzwingen Sie, dass sich das Flex-Element über die gesamte Reihenbreite erstreckt

74

Ich versuche, die ersten beiden untergeordneten Elemente in derselben Zeile beizubehalten, während sich das dritte Element in voller Breite unten befindet, während Flex verwendet wird.

Ich interessiere mich besonders für die in Verwendung flex-growund flex-shrinkEigenschaften auf den ersten 2 Elemente (die nicht mit Prozent einer meiner Gründe ist) aber das dritte Element wirklich volle Breite und unterhalb der ersten beiden sein muss.

Das labelElement wird programmgesteuert nach dem textElement hinzugefügt, wenn ein Fehler auftritt und ich den Code nicht ändern kann.

Wie erzwinge ich, dass das Beschriftungselement eine Breite von 100% unter den beiden anderen Elementen aufweist, die mit flex positioniert werden?

.parent {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: #ececec;
}

.parent * {
  width: 100%;
}

.parent #text {
  min-width: 75px;
  flex-shrink: 2.25;
}
<div class="parent">
  <input type="range" id="range">
  <input type="text" id="text">
  <label class="error">Error message</label>
</div>
Erweitern Sie das Snippet

html css flexbox MPaul
quelle

Antworten:

120

Wenn ein Flex-Element eine ganze Zeile belegen soll, setzen Sie es auf width: 100%oder flex-basis: 100%und aktivieren Sie es wrapfür den Container.

Der Gegenstand verbraucht jetzt den gesamten verfügbaren Platz. Geschwister werden in andere Reihen gezwungen.

.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" id="range">
  <input type="text" id="text">
  <label class="error">Error message (takes full width)</label>
</div>
Erweitern Sie das Snippet

Weitere Informationen: Der Anfangswert der flex-wrapEigenschaft ist nowrap, was bedeutet, dass alle Elemente in einer Reihe angeordnet werden. MDN

Michael Benjamin
quelle
1
"Und aktivieren Sie wrapauf dem Container." <- Das hat mir gefehlt. Warum brauchen wir das?
Fernando Basso
Weil flex-wrap: nowrapist die Standardeinstellung in einem Flex-Container. @ FernandoBasso
Michael Benjamin
Ich verstehe, danke. Ich habe an etwas gearbeitet, das nur einen Flex-Gegenstand in einem Flex-Container hatte, und das Einstellen width: 100%oder flex-basis: 100%war nicht genug, und es hat nur funktioniert, wenn ich wrapden Flex-Container eingestellt habe. Habe gerade ein einfaches Beispiel anprobiert und das Flex-Kind geht 100% breit ohne wrap auf den Container. In meinem Fall muss dann noch etwas los gewesen sein.
Fernando Basso
Was ist, wenn die Komponente nicht umbrochen werden soll, sondern überlaufen und gescrollt werden soll und dennoch 100% der Breite des übergeordneten Elements haben soll? .col .wrapper {Anzeige: flex; Flex-Richtung: Reihe; Breite: ???; Überlauf-x: auto; }
Dane411
10

Sie scheinen nach min-widthKind und flex-wrap:wrapEltern zu suchen :

.parent {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
}

.parent > * {
  flex-grow: 1;
}

.parent > .error {
  min-width: 100%;
  background-color: rgba(255,0,0,.3);
}
<div class="parent">
  <input type="range" id="range">
  <input type="text" id="text">
  <label class="error">Error message</label>
</div>
Erweitern Sie das Snippet

tao
quelle