Wie kann man dafür sorgen, dass Flexbox-Kinder die volle Höhe des Elternteils einnehmen?

Flexbox-Unterelemente belegen die volle Höhe des übergeordneten Elements

In einem Flexbox-Layout füllen untergeordnete Elemente standardmäßig nicht die gesamte Höhe ihres übergeordneten Elements aus Container. Dies kann problematisch sein, wenn versucht wird, eine konsistente vertikale Anordnung zu erstellen.

Problem: Betrachten Sie das folgende Beispiel, bei dem .flex-2-child innerhalb von .flex-2 die Höhe von ausfüllen soll sein Elternteil:

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  flex: 1;
  background-color: red;
}
.flex-2-child {
  height: 100%;
  width: 100%;
  background-color: green;
}

Flex-2-Kind nimmt jedoch die Höhe as nicht vollständig ein erwartet.

Problemumgehung 1: align-items: stretch:

.flex-2 {
  display: flex;
  align-items: stretch;
}

Diese Lösung ändert die Ausrichtung des Flex-Elements und ermöglicht es Flex-2-Child, sich zu strecken und zu füllen die verfügbare Höhe.

Workaround 2: align-self:

.flex-2-child {
  align-self: stretch;
}

Diese alternative Lösung wendet die Ausrichtung direkt auf das untergeordnete Element an und stellt sicher, dass es die Höhe seines übergeordneten Flex-Elements ausfüllt.

Das obige ist der detaillierte Inhalt vonWie kann man dafür sorgen, dass Flexbox-Kinder die volle Höhe des Elternteils einnehmen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!