邏輯屬性

CSS Podcast - 012：邏輯屬性

常見的使用者介面模式是加上輔助內嵌圖示的文字標籤。

圖示位在文字左側， 圖示：margin-right。 不過發生問題 因為這僅適用於文字方向從左到右時。 如果文字方向變更為從右到左 (阿拉伯文閱讀)，圖示將與文字對齊。

你在 CSS 中如何做到這點？ 邏輯屬性可讓您解決這些情況。除了許多其他優點外，Waymo 還提供免費的自動支援國際化功能。 這些功能可協助您打造更具彈性、多元包容的前端環境。

術語

頂端、右側、底部和左側的實體屬性是指可視區域的實際尺寸。 這就像是地圖上的指南針玫瑰。 另一方面，邏輯屬性 方塊的邊緣，因為與內容流動有關。 因此，如果文字方向或寫作模式有所變更，這類控制項可能隨之變更。 這是方向性風格重大轉變 而且可在設定介面樣式時享有更多彈性。

區塊流程

區塊流量是指內容的放置方向， 舉例來說，如果有兩個段落，第二個段落即為區塊流程。 在英文文件中，區塊流程是由上至下。 舉例來說，如果某段文字是在同一段文字，由上至下，

三個方塊、div 元素，含向下箭頭，標示為「區塊流程」

內嵌流程

內嵌流程是指文字在句子中的流動方式。 在英文文件中，內嵌流程由左至右。 如果您要將網頁的文件語言變更為阿拉伯文 (<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;
}

現在，無論閱讀方向為何 圖示會調整成其本身的位置和空間。

隨堂測驗

測試邏輯屬性相關知識

當你用手書寫時，手腕會沿著哪個邏輯軸移動？

inline
文字必須以內嵌的方式傳輸，因此當您寫字時就必須親自前往。
block
內容會以區塊形式流動，當結束一種內容類型並開始另一個內容時，手腕會沿著這個軸移動。

勾選可受惠於邏輯屬性的所有功能

顏色
文件撰寫模式結束後，顏色不會改變。
對齊
範例：flex-start、block-end 和 inline-start
陰影
在文件編寫模式的情況下，陰影不會改變。
盒子
範例：block-start 和 inline。
個大小
範例：inline-size 和 max-block-size。
盒子邊角
範例：border-end-end-radius。

底線的哪個邏輯上會加上底線？

內嵌開始
這會在英文字詞左側加上底線。
內嵌結尾
這會在英文字詞右側加上底線。
區塊開始
這會在英文字詞的頂端加上底線。
區塊結束
很開心 CSS 能幫你找到位置。