Wie kann der verfügbare Platz bei Flexbox-Kindern mit unterschiedlichen Höhen gleichmäßig verteilt werden?

Verfügbaren Platz in Flexbox für Kinder unterschiedlicher Größe füllen

Problem:

In einer Zweiergruppe -Spalten-Flexbox-Layout, Kinder mit unterschiedlichen Höhen tendieren dazu, sich an der Größe des größten Kindes auszurichten. Wie können wir den verfügbaren Platz unabhängig von ihrem Inhalt gleichmäßig auf die Kinder verteilen?

Lösung:

Standardmäßig verteilen Flexbox-Reihen den Platz gleichmäßig auf die Kinder, indem sie sie vertikal strecken . Um dies zu verhindern und Kindern zu ermöglichen, basierend auf ihren Inhalten Platz zu belegen, können wir die Eigenschaft „align-items“ auf „flex-start“ setzen:

#container {
  width: 800px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

Erläuterung:

Durch das Festlegen von align-items: flex-start werden untergeordnete Elemente an der Oberkante des Containers ausgerichtet, sodass sie den verfügbaren Platz basierend auf ihrem eigenen Inhalt vertikal ausfüllen können. Auf diese Weise nimmt jedes Kind den Platz ein, der proportional zu seinem Inhalt ist, anstatt der Größe des größten Kindes in der Reihe zu entsprechen.

Hinweis:

Das ist wichtig zu beachten Flex-Start wirkt sich nur auf die vertikale Ausrichtung der untergeordneten Elemente innerhalb der Zeile aus. Die Eigenschaft „flex-wrap“ umbricht weiterhin Zeilen nach Bedarf, um den verfügbaren Platz unterzubringen.

Das obige ist der detaillierte Inhalt vonWie kann der verfügbare Platz bei Flexbox-Kindern mit unterschiedlichen Höhen gleichmäßig verteilt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!