项目经常会遇到页面适配问题，比如：商城列表显示，分类列表显示等页面，如下：这个页面会随着页面的缩放而发生变化，解决办法：显示：柔性;用子元素的动态宽度来实现，子元素的宽度=（总宽度-自身边距）/每行的数量。.box{边框：1px纯红色；宽度：80%；显示：弹性；方向：ltr；弹性包装：包装；填充：2px；.innerBox{width:calc((100%-12px)/3);/*width=(总宽度-自己的边距)/3每行*/height:50px;边界半径：10px；边距：2px；背景：#ccc；}}在css中有一个“流”的概念，这种布局是自然而自动的，就像水流一样。一般情况下，html元素的布局是从左到右排列的，块级元素是从上到下排列的。我们所说的脱离文档流是指元素从流中浮动，与之前的元素不在同一层级。并形成非入住效应。有了流的概念，我们可以通过改变流的水平流向来改变元素的排列方向。direction属性用于设置文本和表格列的水平溢出方向。rtl表示从右到左，ltr表示从左到右。direction属性介绍：https://developer.mozilla.org/zh-CN/docs/Web/CSS/direction对应上面的flex布局，通过设置文档：方向：rtl；if是一个内联元素，只需要改变水平流向就可以改变元素的左右对齐方式。.container{宽度：348px；边框：1px纯红色；方向：rtl；/*文档水平流向：从右流向：rtl从左流向：ltr*/padding:10px10px0px0px;>按钮{边距内联结束：10px；保证金块结束：10px；}}margin-inline-end用于定义元素的逻辑行内结束边距。这里要注意margin-inline-end是受direction属性影响的。如果文档的水平流向是从右到左，那么margin-inline-end相当于margin-right，margin-inline-start相当于margin-left。如果文档是横向的流向是从左到右，那么margin-inline-end就相当于margin-leftmargin-inline-start就相当于margin-rightdirection:ltr;/*文档的横向流向从右流：rtl从左流：ltr*//*....*/>button{margin-inline-start:10px;保证金块结束：10px；}margin的逻辑属性是围绕inline、block、start、end展开。inline，block表示方向，inline表示水平（左右），block表示垂直（上下）开始，end表示开始和结束方向，start表示开始位置（左），end表示结束位置（右）。以上几个逻辑属性都会受到方向属性的影响，使用时需要注意。margin和padding都可以通过inline、block、start和end的组合变成CSS逻辑属性。padding-inline-start:20px;margin-inline-start:20px;......除了改变文档的水平流向，流向的应用也可以用于对称布局，比如微信聊天页面，改变direction的水平流向，就可以实现聊天气泡自己和对方在微信中的定位。
