#书摘
《CSS 新世界》符合CSS世界“流”概念的逻辑属性margin-inline-end

在CSS2.1时代，CSS属性的定位都是基于方向的，而不是“流”。这样的设计其实是有问题的，基于方向进行定位虽然符合现实世界认知，但和CSS世界基于“流”的底层设计理念不符，margin-right就是一个基于方向的CSS属性，因为right表示右侧，和现实世界的右侧匹配。

通常情况下，我们这么使用是不会有任何问题的。但是，如果开发者使用direction属性改变了文档的水平流向，希望按钮从右往左排列，就会有预期之外的表现，此时margin-right产生的间隙就不是我们想要的，margin-left 才是我们想要的。

但是，如果我们一开始设置的不是符合现实世界认知的margin-right属性，而是符合CSS世界“流”概念的逻辑属性margin-inline-end，代码如下：
button { 
    margin-inline-end: 10px; 
}
那么我们使用direction属性改变文档的水平流向是不会出现布局上的任何问题的

margin-inline-end 是一个“流淌”在文档流中的CSS逻辑属性，表示内联元素文档流结束的方向。

也就是说，当文档流的方向是从左往右的时候，margin-inline- end属性的渲染表现就等同于margin-right属性；当文档流的方向是从右往左的时候，margin-inline-end属性的渲染表现就等同于margin-left属性。

存在非常适合使用这类CSS逻辑属性的场景，那就是对称布局，例如，模拟微信对话的效果就是典型的对称布局。只需要使用CSS逻辑属性实现一侧的布局效果，然后另外一侧的布局效果我们只需要使用一句direction:rtl就完成了。

https://memo.cosine.ren/m/419
 
 
Back to Top