乐趣区

关于前端:CSS流动布局页面自适应

jiezi

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

该页面会随着页面的放大放大而随之发生变化，解决办法：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

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

退出移动版