In this guide, we will explain the flow-relative mappings between physical dimension properties and logical properties used for sizing elements on our pages.

When specifying the size of an item, theCSS logical properties and values module gives you the ability to indicate sizing as it relates to the flow of text (inline and block) rather than physical sizing which relates to the physical dimensions of horizontal and vertical (e.g., left and right). While these flow relative mappings may well become the default for many of us, in a design you may well use both physical and logical sizing. You might want some features to always relate to the physical dimensions whatever the writing mode.

Mappings for dimensions

The table below provides mappings between logical and physical properties. These mappings assume that you are in ahorizontal-tb writing mode, such as English or Arabic, in which casewidth would be mapped toinline-size.

If you were in a vertical writing mode theninline-size would be mapped toheight.

Width and height example

The logical mappings forwidth andheight areinline-size, which sets the length in the inline dimension andblock-size, which sets the length in the block dimension. When working in English, replacingwidth withinline-size andheight withblock-size will give the same layout.

In the live example below, thewriting-mode is set tohorizontal-tb. Change it tovertical-rl and you will see that the first example — which useswidth andheight — remains the same size in each dimension, despite the text becoming vertical. The second example — which usesinline-size andblock-size — will follow the text direction as if the entire block has rotated.

<div>  <div>I have a width of 200px and a height of 100px.</div>  <div>    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;}

.box {  writing-mode: horizontal-tb;}.physical {  width: 200px;  height: 100px;}.logical {  inline-size: 200px;  block-size: 100px;}

Min-width and min-height example

There are also mappings formin-width andmin-height — these aremin-inline-size andmin-block-size. These work in the same way as theinline-size andblock-size properties, but setting a minimum rather than a fixed size.

Try changing the example below tovertical-rl, as with the first example, to see the effect it has. I am usingmin-height in the first example andmin-block-size in the second.

<div>  <div>    I have a width of 200px and a min-height of 5em.  </div>  <div>    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;}

.box {  writing-mode: horizontal-tb;}.physical {  width: 200px;  min-height: 5em;}.logical {  inline-size: 200px;  min-block-size: 5em;}

Max-width and max-height example

Finally you can usemax-inline-size andmax-block-size as logical replacements formax-width andmax-height. Try playing with the below example in the same way as before.

<div>  <div>I have a max-width of 200px.</div>  <div>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;}

.box {  writing-mode: horizontal-tb;}.physical {  max-width: 200px;}.logical {  max-inline-size: 200px;}

Logical keywords for resize

Theresize property sets whether or not an item can be resized and has physical values ofhorizontal andvertical. Theresize property also has logical keyword values. Usingresize: inline allows resizing in the inline dimension andresize: block allow resizing in the block dimension.

The keyword value ofboth for the resize property works whether you are thinking physically or logically. It sets both dimensions at once. Try playing with the below example.

<div>  <div>    I have a width of 200px and a height of 100px. I can be resized    horizontally.  </div>  <div>    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;}

.box {  writing-mode: horizontal-tb;  overflow: scroll;}.physical {  width: 200px;  height: 100px;  resize: horizontal;}.logical {  inline-size: 200px;  block-size: 100px;  resize: inline;}