Logische Eigenschaften für Größenanpassung
In diesem Leitfaden werden wir die flussrelativen Zuordnungen zwischen physikalischen Dimensionseigenschaften und logischen Eigenschaften erläutern, die zur Größenanpassung von Elementen auf unseren Seiten verwendet werden.
Beim Festlegen der Größe eines Elements gibt Ihnen das Modul CSS logische Eigenschaften und Werte die Möglichkeit, die Größe in Bezug auf den Textfluss (in Zeilen und Blöcken) anzugeben, anstatt physikalischer Größen, die sich auf die physikalischen Dimensionen horizontal und vertikal (z.B. links und rechts) beziehen. Während diese flussrelativen Zuordnungen für viele von uns gut zur Norm werden könnten, können Sie in einem Design sowohl physikalische als auch logische Größen verwenden. Möglicherweise möchten Sie, dass einige Funktionen immer in Bezug auf die physikalischen Dimensionen stehen, unabhängig vom Schreibmodus.
Zuordnungen für Dimensionen
Die folgende Tabelle bietet Zuordnungen zwischen logischen und physikalischen Eigenschaften. Diese Zuordnungen gehen davon aus, dass Sie sich in einem horizontal-tb-Schreibmodus befinden, wie etwa Englisch oder Arabisch, in welchem Fall width der inline-size zugeordnet würde.
Wenn Sie sich in einem vertikalen Schreibmodus befinden, würde inline-size der height zugeordnet.
| Logische Eigenschaft | Physikalische Eigenschaft |
|---|---|
inline-size |
width |
block-size |
height |
min-inline-size |
min-width |
min-block-size |
min-height |
max-inline-size |
max-width |
max-block-size |
max-height |
Beispiel für Breite und Höhe
Die logischen Zuordnungen für width und height sind inline-size, die die Länge in der Inline-Dimension festlegen, und block-size, die die Länge in der Block-Dimension festlegen. Bei Arbeiten in Englisch führt das Ersetzen von width durch inline-size und height durch block-size zum gleichen Layout.
Im folgenden Live-Beispiel ist der writing-mode auf horizontal-tb eingestellt. Ändern Sie es zu vertical-rl, und Sie werden sehen, dass das erste Beispiel — welches width und height verwendet — in jeder Dimension gleich groß bleibt, obwohl der Text vertikal wird. Das zweite Beispiel — welches inline-size und block-size verwendet — folgt der Textausrichtung, als ob der gesamte Block gedreht wurde.
Beispiel für Mindestbreite und Mindesthöhe
Es gibt auch Zuordnungen für min-width und min-height — diese sind min-inline-size und min-block-size. Diese funktionieren auf die gleiche Weise wie die Eigenschaften inline-size und block-size, legen jedoch ein Minimum anstatt einer festen Größe fest.
Versuchen Sie, das folgende Beispiel in vertical-rl zu ändern, wie im ersten Beispiel, um die Auswirkungen zu sehen. Ich verwende min-height im ersten Beispiel und min-block-size im zweiten.
Beispiel für Maximalbreite und Maximalhöhe
Schließlich können Sie max-inline-size und max-block-size als logische Ersatzlösungen für max-width und max-height verwenden. Versuchen Sie, mit dem folgenden Beispiel auf die gleiche Weise zu spielen wie zuvor.
Logische Schlüsselwörter für Größenänderung
Die resize-Eigenschaft legt fest, ob ein Element verändert werden kann, und hat physikalische Werte von horizontal und vertical. Die resize-Eigenschaft hat auch logische Schlüsselwortwerte. Mit resize: inline können Sie in der Inline-Dimension und mit resize: block in der Block-Dimension ändern.
Der Schlüsselwortwert both für die resize-Eigenschaft funktioniert, egal ob Sie physikalisch oder logisch denken. Er setzt beide Dimensionen auf einmal. Versuchen Sie, mit dem untenstehenden Beispiel zu experimentieren.