Wie kann ich dafür sorgen, dass Flexbox-Elemente die gleiche Breite einnehmen?

Flexbox-Elemente gleichmäßig verteilen

Flexbox hat als vielseitige Layoutmethode an Beliebtheit gewonnen, neigt jedoch dazu, den Platz um Elemente herum eher gleichmäßig zu verteilen als die Gegenstände selbst. Um dieser Herausforderung zu begegnen, suchen wir nach einer Lösung, um sicherzustellen, dass alle Flexbox-Elemente die gleiche Breite einnehmen.

Flexbox arbeitet nach dem Prinzip, Elemente basierend auf ihrer Flex-Wachstums-Eigenschaft zu vergrößern und zu verkleinern. Standardmäßig ist „Flex-Grow“ auf 0 eingestellt, sodass Elemente mit ihrer natürlichen Breite gerendert werden. Wir können diese Eigenschaft jedoch ändern, um das gewünschte Ergebnis zu erzielen.

Um Elemente mit gleicher Breite zu erstellen, setzen Sie deren Flexbasis auf 0. Dadurch wird ein gemeinsamer Ausgangspunkt für alle Elemente festgelegt. Lassen Sie außerdem zu, dass die Elemente wachsen, indem Sie „flex-grow“ auf 1 setzen. Dadurch wird sichergestellt, dass sie gleichmäßig erweitert werden, um den verfügbaren Platz auszufüllen.

Der folgende CSS-Code veranschaulicht diesen Ansatz:

.header {
  display: flex;
}

.item {
  flex: 1 1 0px;
  text-align: center;
  border: 1px solid black;
}

Indem Sie „flex-basis“ auf 0 und „flex-grow“ auf 1 setzen, haben alle Elemente innerhalb der .item-Klasse unabhängig von ihrem Inhalt die gleiche Menge an Speicherplatz. Dadurch wird die im ursprünglichen Beispiel beobachtete ungleichmäßige Verteilung beseitigt.

Hinweis: Einige IDEs und Linters schlagen möglicherweise vor, die Einheit „px“ aus Flex wegzulassen. Durch die Beibehaltung wird jedoch die korrekte Darstellung im Internet Explorer sichergestellt.

Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass Flexbox-Elemente die gleiche Breite einnehmen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!