文本与对齐:start / end 与 inline 浮动
一批早于「逻辑属性模块」就存在的属性,本身就接受流向相对的关键字:text-align: start | end、float: inline-start | inline-end、clear 同理;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-start、align-items
全是流向相对。换书写方向时它们自动镜像,不必改对齐代码——逻辑坐标系早已是现代布局的默认。详见 Box Alignment 系列。