Warum wirkt sich das Festlegen einer festen Höhe für ein Flex-Element nicht auf dessen Größe aus?

Für dieses Beispiel reicht es aus, diese Zeile zu behandeln:

.flex-item {
    ... ;
    height: auto;
}

Ändern Sie ihren Wert durch:

.flex-item {
    ... ;
    height: 50px;
}

Diese Änderung wird überhaupt nichts ändern. Die Höhe wird weiterhin automatisch berechnet.

Um alle Zellen quadratisch zu machen, lesen Sie weiter unten:

Hier ist eine Möglichkeit, alle Zellen mit Flexbox quadratisch zu machen.

1. Um das Seitenverhältnis entweder manuell oder als absoluten Wert einzuschränken, stellen Sie es mit Prozentsätzen ein, wie Sie es bereits getan haben.
2. Setzen Sie dann Flexbox bezogen zurück Höhe/Breite dieser Zellen auf „Automatisch“ einstellen. Dadurch wird sichergestellt, dass die Größe der Artikel nicht an die Behältergröße angepasst wird, wenn diese sich ändert.

.flex-item {
  ... ;
  height: auto;
  width: auto;
  min-width: 50px; /* minimum width of 50px; adapt to your needs */ 
}

Das obige ist der detaillierte Inhalt vonWarum wirkt sich das Festlegen einer festen Höhe für ein Flex-Element nicht auf dessen Größe aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!