Wie kann ich flexible Artikel proportional zu ihrer Originalgröße vergrößern lassen?

Flex-Elemente proportional zu ihrer Originalgröße erweitern

In HTML und CSS ist es üblich, Flexbox zu verwenden, da sich damit problemlos flexible und dynamische Layouts erstellen lassen. In bestimmten Szenarien möchten Sie jedoch möglicherweise, dass sich Flex-Elemente proportional zu ihrer ursprünglichen Größe ausdehnen und ihre relative Breite auch dann beibehalten, wenn sich die Gesamtbreite des Containers ändert.

In einem typischen Flexbox-Setup könnten Sie Flex verwenden: 1, damit sich alle Elemente unabhängig von ihrer ursprünglichen Größe gleichmäßig ausdehnen. Dieser Ansatz führt jedoch dazu, dass alle Elemente die gleiche Breite haben. Um dies zu umgehen, können Sie die Flex-Basis-Eigenschaft nutzen.

Flex-Basis und Flex-grow

Flex-Basis definiert die anfängliche Breite eines Flex-Elements. Standardmäßig nimmt es den Wert „auto“ an, was bedeutet, dass es sich an die Größe des Inhalts des Elements anpasst. In Kombination mit Flex-Grow können Sie steuern, wie überschüssiger Platz im Container auf Flex-Elemente verteilt wird.

Mit Flex-Basis: Auto verteilt Flex-Grow nur überschüssigen Platz, ausgenommen der vom Inhalt des Elements eingenommene Platz. Dadurch wird sichergestellt, dass Elemente proportional zu ihrer ursprünglichen Größe erweitert werden.

Beispiel: Anpassen der Schaltflächenbreiten

Stellen Sie sich eine Reihe von Schaltflächen mit unterschiedlichen Breiten vor. Mit dem folgenden CSS werden alle Schaltflächen erweitert, um den verfügbaren Platz auszufüllen, wobei ihre relative Größe beibehalten wird:

.row-flex {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.button {
  flex: auto;
  display: inline-block;
  padding: 10px;
  color: #fff;
  text-align: center;
}

Alternativ können Sie die folgende Kurzschreibweise verwenden:

.button {
  flex: 1 1 auto;
}

Schlussfolgerung

Durch das Verständnis des Zusammenspiels zwischen Flex-Basis und Flex-Grow können Sie sicherstellen, dass sich Flex-Artikel proportional zu ihrer ursprünglichen Größe ausdehnen und dabei ihre individuelle Breite respektieren. Dieser Ansatz bietet eine größere Flexibilität bei dynamischen Layouts und responsivem Design.

Das obige ist der detaillierte Inhalt vonWie kann ich flexible Artikel proportional zu ihrer Originalgröße vergrößern lassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!