Logische Eigenschaften zur Größenbestimmung

In diesem Leitfaden erklären wir die flussrelativen Zuordnungen zwischen physikalischen Dimensionseigenschaften und logischen Eigenschaften, die zur Größenbestimmung von Elementen auf unseren Seiten verwendet werden.

Bei der Angabe der Größe eines Elements ermöglicht Ihnen das Modul CSS logical properties and values, die Größe in Bezug auf den Textfluss (inline und block) anzugeben, anstatt sich auf physikalische Größen zu beziehen, die sich auf die physikalischen Maße horizontaler und vertikaler Dimensionen (z.B. links und rechts) beziehen. Obwohl diese flussrelativen Zuordnungen für viele von uns möglicherweise zum Standard werden, können Sie in einem Design sowohl physikalische als auch logische Größen verwenden. Sie könnten wollen, dass einige Merkmale sich immer auf die physikalischen Dimensionen beziehen, unabhängig vom Schreibmodus.

Zuordnungen für Dimensionen

Die folgende Tabelle bietet Zuordnungen zwischen logischen und physikalischen Eigenschaften. Diese Zuordnungen setzen voraus, dass Sie sich in einem horizontal-tb Schreibmodus befinden, wie z.B. Englisch oder Arabisch, in welchem Fall width zu inline-size zugeordnet würde.

Wenn Sie sich in einem vertikalen Schreibmodus befinden, würde inline-size zu height zugeordnet werden.

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`

Breiten- und Höhenbeispiel

Die logischen Zuordnungen für width und height sind inline-size, welches die Länge in der Inline-Dimension setzt, und block-size, welches die Länge in der Block-Dimension setzt. Beim Arbeiten in Englisch führt das Ersetzen von width durch inline-size und height durch block-size zum gleichen Layout.

Im nachfolgenden Live-Beispiel ist der writing-mode auf horizontal-tb gesetzt. Ändern Sie ihn in 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 rotiert wäre.

html

<div class="container">
  <div class="physical box">I have a width of 200px and a height of 100px.</div>

  <div class="logical box">
    I have an inline-size of 200px and a block-size of 100px.
  </div>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}
.container {
  display: flex;
}
.box {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
  padding: 10px;
  margin: 10px;
}

css

.box {
  writing-mode: horizontal-tb;
}

.physical {
  width: 200px;
  height: 100px;
}

.logical {
  inline-size: 200px;
  block-size: 100px;
}

Min-width und Min-height Beispiel

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, nur dass eine Mindestgröße anstelle einer festen Größe festgelegt wird.

Versuchen Sie, das Beispiel unten auf vertical-rl zu ändern, wie beim ersten Beispiel, um den Effekt zu sehen. Ich verwende min-height im ersten Beispiel und min-block-size im zweiten.

html

<div class="container">
  <div class="physical box">
    I have a width of 200px and a min-height of 5em.
  </div>

  <div class="logical box">
    I have an inline-size of 200px and a min-block-size of 5em.
  </div>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}
.container {
  display: flex;
}
.box {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
  padding: 10px;
  margin: 10px;
}

css

.box {
  writing-mode: horizontal-tb;
}

.physical {
  width: 200px;
  min-height: 5em;
}

.logical {
  inline-size: 200px;
  min-block-size: 5em;
}

Max-width und Max-height Beispiel

Schließlich können Sie max-inline-size und max-block-size als logische Ersetzungen für max-width und max-height verwenden. Versuchen Sie, mit dem untenstehenden Beispiel auf die gleiche Weise wie zuvor zu experimentieren.

html

<div class="container">
  <div class="physical box">I have a max-width of 200px.</div>

  <div class="logical box">I have an max-inline-size of 200px.</div>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}
.container {
  display: flex;
}
.box {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
  padding: 10px;
  margin: 10px;
}

css

.box {
  writing-mode: horizontal-tb;
}

.physical {
  max-width: 200px;
}

.logical {
  max-inline-size: 200px;
}

Logische Schlüsselwörter für das Resizing

Die resize Eigenschaft legt fest, ob ein Element in der Größe verändert werden kann, und hat physikalische Werte von horizontal und vertical. Die resize-Eigenschaft hat auch logische Schlüsselwortwerte. Die Verwendung von resize: inline ermöglicht das Resizing in der Inline-Dimension und resize: block erlaubt das Resizing in der Block-Dimension.

Der Schlüsselwortwert both für die Resizing-Eigenschaft funktioniert sowohl physikalisch als auch logisch. Er setzt beide Dimensionen gleichzeitig. Versuchen Sie, mit dem folgenden Beispiel zu experimentieren.

html

<div class="container">
  <div class="physical box">
    I have a width of 200px and a height of 100px. I can be resized
    horizontally.
  </div>

  <div class="logical box">
    I have an inline-size of 200px and a block-size of 100px. I can be resized
    in the inline direction.
  </div>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}
.container {
  display: flex;
}
.box {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
  padding: 10px;
  margin: 10px;
}

css

.box {
  writing-mode: horizontal-tb;
  overflow: scroll;
}

.physical {
  width: 200px;
  height: 100px;
  resize: horizontal;
}

.logical {
  inline-size: 200px;
  block-size: 100px;
  resize: inline;
}