用於尺寸的邏輯屬性
在本指南中，我們將解釋用於設定頁面元素尺寸的物理維度屬性和邏輯屬性之間與流相關的對映關係。
在指定一個專案的尺寸時，CSS 邏輯屬性和值模組讓你能夠根據文字流（內聯和塊）來指定尺寸，而不是根據物理尺寸（例如，左和右）來指定。雖然這些與流相關的對映關係很可能會成為我們許多人的預設選擇，但在設計中你很可能會同時使用物理和邏輯尺寸。你可能希望某些特性無論書寫模式如何，都始終與物理尺寸相關聯。
尺寸的對映關係
下表提供了邏輯屬性和物理屬性之間的對映關係。這些對映假設你處於 horizontal-tb（從上到下水平書寫）的書寫模式，例如英語或阿拉伯語，在這種情況下，width 會對映到 inline-size。
如果你處於垂直書寫模式，那麼 inline-size 將會對映到 height。
寬度和高度示例
width 和 height 的邏輯對映是 inline-size（設定內聯維度的長度）和 block-size（設定塊維度的長度）。在英語環境下，用 inline-size 替換 width，用 block-size 替換 height，將會得到相同的佈局。
在下面的即時示例中，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 允許在塊維度上調整大小。
無論你從物理還是邏輯角度考慮，resize 屬性的關鍵字值 both 都能生效。它會同時設定兩個維度。請嘗試操作下面的示例。
<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;
}