CSS Podcast - 012：邏輯屬性
常見的使用者介面模式是包含支援內嵌圖示的文字標籤。
圖示位於文字左側，兩者之間的間隔有些許間距 (由圖示上的 margin-right 提供)。但這樣的問題，因為文字方向必須是從左到右，才能正常運作。如果文字方向變更為從右到左 (也就是阿拉伯文等語言顯示方式)，系統就會根據文字顯示圖示。
您要如何在 CSS 中說明這一點？ 邏輯屬性可讓您解決這類情況。除了許多其他優點，這些福利還為國際化提供免費的自動支援。藉此打造更具韌性、多元包容的前端。
術語
頂端、右側、底部和左側的實體屬性是指可視區域的實際尺寸。您可以將這些點視為地圖上的指南針。另一方面，邏輯屬性是指與內容流動相關的方塊邊緣。因此，當文字方向或寫入模式有所變更時，控制項也會隨之變更。這與方向樣式截然不同，在設定介面樣式時，我們能夠享有更多彈性。
區塊流程
區塊流程是放置內容區塊的方向。舉例來說，如果有兩個段落，區塊流程就是第二個段落的位置。在英文文件中，區塊流程為由上到下。以由上而下的文字段落為例，這是一串文字。
內嵌流程
內嵌流程是指文字在句子中的流動方式。在英文文件中，內嵌流程由左至右。如果將網頁的文件語言變更為阿拉伯文 (<html lang="ar">)，內嵌流程會由右至左。
文字流向取決於文件的書寫模式。您可以使用 writing-mode 屬性變更文字的配置方向。這項功能可以套用至整份文件或個別元素。
流量相對數
以往在 CSS 中，我們只能套用與側邊方向相關的邊界等屬性。舉例來說，margin-top 會套用至元素的實體頂端。使用邏輯屬性時，margin-top 會變為 margin-block-start。這表示無論語言和文字方向為何，區塊流程都有適當的邊界規則。
尺寸
為避免元素超過特定寬度或高度，您可以編寫以下規則：
.my-element {
max-width: 150px;
max-height: 100px;
}
資料流相關對應為 max-inline-size 和 max-block-size。您也可以改用 min-block-size 和 min-inline-size，而不使用 min-height 和 min-width。
使用邏輯屬性時，寬度和高度規則上限看起來會像這樣：
.my-element {
max-inline-size: 150px;
max-block-size: 100px;
}
開始與結束
與其使用頂端、右側、底部和左側等路線，不如使用起點和終點。並提供「封鎖」、「內嵌」、「區塊結束」以及「內嵌開始」功能。這些設定可讓您套用 CSS 屬性來回應寫入模式變更。
舉例來說，如要將文字靠右對齊，您可以使用這個 CSS：
p {
text-align: right;
}
如果您不的目標是讓實體正確對齊，而是從閱讀方向開始，這樣並不有幫助。使用邏輯值時，會有更實用的 start 和 end 值對應至文字方向。文字對齊規則現在如下所示：
p {
text-align: end;
}
間距與位置
margin、padding 和 inset 的邏輯屬性可以用來定位元素，並決定這些元素在書寫模式中如何相互互動，效率更高。邊界和邊框間距相關屬性仍會直接對應至路線，但主要差異在於，寫入模式變更時，兩者會跟著變更。
.my-element {
padding-top: 2em;
padding-bottom: 2em;
margin-left: 2em;
position: relative;
top: 0.2em;
}
這麼做會使用 padding 新增部分垂直空間，並使用 margin 從左側將其移出。top 屬性也會將其向下移動。使用邏輯屬性對應項目時，看起來會像這樣：
.my-element {
padding-block-start: 2em;
padding-block-end: 2em;
margin-inline-start: 2em;
position: relative;
inset-block-start: 0.2em;
}
這會透過 padding 新增一些內嵌空間，並利用 margin 從內嵌開始推送出去。inset-block 屬性會從區塊開始向內移動。
inset-block 屬性並不是使用邏輯屬性的唯一簡寫選項。您可以使用邊界和邊框間距屬性的簡寫版本，進一步簡化這項規則。
.my-element {
padding-block: 2em;
margin-inline: 2em 0;
position: relative;
inset-block: 0.2em 0;
}
框線
使用邏輯屬性也可以新增 border 和 border-radius。如要在右下方加上右側半徑的邊框，您可以撰寫以下規則：
.my-element {
border-bottom: 1px solid red;
border-right: 1px solid red;
border-bottom-right-radius: 1em;
}
您也可以使用邏輯屬性，如下所示：
.my-element {
border-block-end: 1px solid red;
border-inline-end: 1px solid red;
border-end-end-radius: 1em;
}
border-end-end-radius 中的 end-end 是區塊結尾「和」內嵌結尾。
單位
邏輯屬性提供兩個新單位：vi 和 vb。vi 單位是內嵌方向的可視區域大小的 1%。非邏輯屬性對應為 vw。vb 單位是區塊方向的可視區域 1%。非邏輯屬性對應為 vh。
這些單位一律會對應至朗讀方向。舉例來說，如果您希望元素佔用可視區域可用內嵌空間的 80%，如果書寫模式為垂直模式，使用 vi 單元會自動將該大小切換為底部。
以務實方式使用邏輯屬性
邏輯屬性和寫入模式不只用於國際化。您可以運用這些內容，產生功能更豐富的使用者介面。
如果您的圖表包含 X 軸和 Y 軸標籤，則可能需要垂直讀取 Y 標籤上的文字。
由於示範中的 Y 軸標籤具有 vertical-rl 的 writing-mode，因此您可以在兩個標籤上使用相同的 margin 值。margin-block-start 值會套用至兩個標籤，因為區塊起始位置在 Y 軸右側，X 軸頂端則位於頂部。方塊開頭的兩側加上紅色框線，方便你查看。
解決圖示問題
我們討論了邏輯屬性後 可以將知識套用到一開始的設計問題
p {
display: inline-flex;
align-items: center;
}
p svg {
width: 1.2em;
height: 1.2em;
margin-right: 0.5em;
flex: none;
}
邊界已套用至圖示元素右側。為了支援圖示和文字之間的間距，才能支援所有閱讀方向，請改用 margin-inline-end 屬性。
p {
display: inline-flex;
align-items: center;
}
p svg {
width: 1.2em;
height: 1.2em;
margin-inline-end: 0.5em;
flex: none;
}
現在，無論閱讀方向為何 圖示本身和空間本身都能正確放置
隨堂測驗
測驗您對邏輯屬性的知識
在你用手書寫時，手腕會跟著哪個邏輯軸移動？
inlineblock確認所有可受益於邏輯屬性的項目
flex-start、block-end 和 inline-startblock-start 和 inline。inline-size 和 max-block-size。border-end-end-radius。文字的哪個邏輯面加上底線？