我的项目中常常会碰到页面自适应的问题，例如：商城的列表展现、分类列表展现等页面，如下：

该页面会随着页面的放大放大而随之发生变化，解决办法：display: flex;配合子元素的动静宽度来实现，子元素的宽度 = (总宽 - 本身的margin) / 每行的数量即可。

.box{    border: 1px solid red;    width: 80%;    display: flex;    direction: ltr;     flex-wrap: wrap;    padding: 2px;    .innerBox{        width: calc((100% - 12px) / 3);  /* 宽度 = (总宽 - 本身的margin) / 每行3个 */        height: 50px;        border-radius: 10px;        margin: 2px;        background: #ccc;    }}


在css中有一个“流”的概念，这种布局天然主动，像水流一样。失常状况下，html的元素布局是从左往右顺次排列，块级元素从上往下排列，咱们所说的脱离文档流也就是该元素从流中沉没起来，与之前的元素不在同一个层级而造成的不占位成果。

有了流这个概念后，咱们能够通过更改流的程度流向来更改元素的排列方向。
direction属性用来设置文本、表列程度溢出的方向。 rtl 示意从右到左， ltr 示意从左到右。

direction属性介绍：https://developer.mozilla.org/zh-CN/docs/Web/CSS/direction

对应下面的flex布局，通过设置文档的程度流向来更改文档的起始地位：

 direction: rtl;

如果是行内元素，只须要更改程度流向即可实现元素的左右对齐。

.container{    width: 348px;    border: 1px solid red;    direction: rtl;  /*文档程度流向 从右流向:rtl 从左流向:ltr*/    padding: 10px 10px 0px 0px;    >button{        margin-inline-end: 10px;        margin-block-end : 10px;    }}
margin-inline-end用于定义元素的逻辑内联完结边距。

这里须要留神，margin-inline-end是受direction属性影响的，如果文档的程度流向为右向左，那么
margin-inline-end相当于margin-right
margin-inline-start相当于margin-left
如果文档的程度流向为左向右，那么
margin-inline-end相当于margin-left
margin-inline-start相当于margin-right

direction: ltr;  /*文档程度流向 从右流向:rtl 从左流向:ltr*//*....*/    >button{       margin-inline-start: 10px;       margin-block-end : 10px;    }


margin的逻辑属性是围绕inline、block、start、end开展的
inline、block示意方向，inline示意程度（左右），block示意垂直（高低）
start、end示意起止方位，start示意开始地位（左），end示意完结地位（右）
下面的几种逻辑属性都会受到direction属性影响，应用时须要留神。

margin、padding都能够通过inline、block、start、end组合变为css逻辑属性。
padding-inline-start: 20px;margin-inline-start: 20px; ............

流的利用除了更改文档的程度流以外，还能够用来做对称布局，例如微信聊天页，更改direction的程度流向，即可实现微信的本身和对方的聊天气泡定位。

<!-- 微信聊天页 --><div class="wx_chat">     <div class="wx_chunk" v-for="(item,index) in 3">         <div class="wx_image">头像</div><span>用户昵称</span>     </div>          <div class="my_wx_chunk">         <div class="wx_image">我的头像</div><span>用户昵称</span>     </div></div><!-- 微信聊天页end -->
.wx_chat{    width: 300px;    border: 1px solid cyan;    margin: 20px;    .wx_chunk{        display: flex;        .wx_image{        width: 50px;        height: 50px;        text-align: center;        line-height: 50px;        border: 1px solid red;        }    }    .my_wx_chunk{        direction: rtl;  /* 更改程度流向为向右 */        display: flex;        .wx_image{        width: 50px;        height: 50px;        font-size: 12px;        text-align: center;        line-height: 50px;        border: 1px solid red;        }    }}

成果如下：

案例源码：https://gitee.com/wang_fan_w/css-diary

如果感觉这篇文章对你有帮忙，欢送点赞、珍藏、转发哦~