專案中經常會碰到頁面自適應的問題，例如：商城的串列展示、分類串列展示等頁面，如下：
該頁面會隨著頁面的放大縮小而隨之發生變化，解決方法：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 >
<div v-for="(item,index) in 3">
<div >頭像</div><span>用戶昵稱</span>
</div>
<div >
<div >我的頭像</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
如果覺得這篇文章對你有幫助，歡迎點贊、收藏、轉發哦~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/546246.html
標籤：其他
上一篇：前端設計模式——觀察者模式