Логические свойства для размеров

В таблице ниже представлены сопоставления между логическими и физическими свойствами. Эти сопоставления предполагают, что вы находитесь в horizontal-tb режиме написания, таком как английский или арабский, в этом случае width будет сопоставлен с inline-size.

Если вы находитесь в вертикальном режиме написания, то inline-size будет сопоставлен с height.

Логические сопоставления для width и height представляют собой inline-size, которое задаёт длину в строчном измерении, и block-size, которое задаёт длину в блочном измерении. При работе в английском языке замена width на inline-size и height на block-size даст тот же макет.

В примере ниже writing-mode установлено на horizontal-tb. Измените его на vertical-rl, и вы увидите, что первый пример — использующий width и height — сохраняет тот же размер по каждому измерению, несмотря на то, что текст стал вертикальным. Второй пример — использующий inline-size и block-size — будет следовать направлению текста, как если бы весь блок был повернут.

<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>

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

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

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

Также существуют сопоставления для min-width и min-height — это min-inline-size и min-block-size. Они работают так же, как свойства inline-size и block-size, но задают минимальный, а не фиксированный размер.

Попробуйте изменить пример ниже на vertical-rl, как и в первом примере, чтобы увидеть его эффект. В первом примере используется min-height, а во втором — min-block-size.

<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>

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

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

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

Наконец, вы можете использовать max-inline-size и max-block-size в качестве логических замен для max-width и max-height. Попробуйте поэкспериментировать с примером ниже аналогично.

<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>

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

.physical {
  max-width: 200px;
}

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

Свойство resize устанавливает возможность изменения размера элемента и имеет физические значения horizontal и vertical. Свойство resize также имеет логические ключевые слова. Используя resize: inline можно изменять размер в строчном измерении, а resize: block позволяет изменять размер в блочном измерении.

Ключевое слово both для свойства resize работает как в физическом, так и в логическом представлении. Оно устанавливает оба размера одновременно. Попробуйте поэкспериментировать с примером ниже.

<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>

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

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

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