← CSS 逻辑属性 · 把上下左右换成 block / inline / 文本与对齐:start / end 与 inline 浮动 待审核 5 / 5
flow · 文本与对齐

文本与对齐:start / end 与 inline 浮动

一批早于「逻辑属性模块」就存在的属性,本身就接受流向相对的关键字:text-align: start | endfloat: inline-start | inline-endclear 同理;margin-inline: auto 取代 margin-left/right: auto 做居中。下面把逻辑关键字与物理关键字并排,翻转 direction 时,只有逻辑那一侧跟着镜像。

1 · text-align:start 跟着方向走,left 不动

2 · float: inline-start 跟着方向走,left 不动

居中也有逻辑写法: margin-inline: auto 让块沿 inline 轴居中,等价于横排的 margin-left: auto; margin-right: auto;,但竖排下自动改为垂直居中。表格标题用 caption-side: inline-start 取代 left

Flexbox 与 Grid 生来就是逻辑的。 flex-direction: row 沿的是 inline 轴、column 沿 block 轴;对齐关键字 justify-content: start / flex-startalign-items 全是流向相对。换书写方向时它们自动镜像,不必改对齐代码——逻辑坐标系早已是现代布局的默认。详见 Box Alignment 系列