CSS流动布局-页面自适应

CSS流动布局-页面自适应已关闭评论
258 次浏览

A+

所属分类：Web前端

摘要

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

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

项目中经常会碰到页面自适应的问题，例如：商城的列表展示、分类列表展示等页面，如下：
CSS流动布局-页面自适应
该页面会随着页面的放大缩小而随之发生变化，解决方法：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流动布局-页面自适应
在css中有一个“流”的概念，这种布局自然自动，像水流一样。正常情况下，html的元素布局是从左往右依次排列，块级元素从上往下排列，我们所说的脱离文档流也就是该元素从流中漂浮起来，与之前的元素不在同一个层级而形成的不占位效果。

有了流这个概念后，我们可以通过更改流的水平流向来更改元素的排列方向。
direction属性用来设置文本、表列水平溢出的方向。 rtl 表示从右到左， ltr 表示从左到右。
CSS流动布局-页面自适应
direction属性介绍：https://developer.mozilla.org/zh-CN/docs/Web/CSS/direction

对应上面的flex布局，通过设置文档的水平流向来更改文档的起始位置：

 direction: rtl;

CSS流动布局-页面自适应

如果是行内元素，只需要更改水平流向即可实现元素的左右对齐。
CSS流动布局-页面自适应

.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;     }

CSS流动布局-页面自适应
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;         }     } }

效果如下：
CSS流动布局-页面自适应