項(xiàng)目中經(jīng)常會(huì)碰到頁(yè)面自適應(yīng)的問題，例如：商城的列表展示、分類列表展示等頁(yè)面，如下：

該頁(yè)面會(huì)隨著頁(yè)面的放大縮小而隨之發(fā)生變化，解決方法：display: flex;配合子元素的動(dòng)態(tài)寬度來實(shí)現(xiàn)，子元素的寬度 = (總寬 - 自身的margin) / 每行的數(shù)量即可。

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

在css中有一個(gè)“流”的概念，這種布局自然自動(dòng)，像水流一樣。正常情況下，html的元素布局是從左往右依次排列，塊級(jí)元素從上往下排列，我們所說的脫離文檔流也就是該元素從流中漂浮起來，與之前的元素不在同一個(gè)層級(jí)而形成的不占位效果。

有了流這個(gè)概念后，我們可以通過更改流的水平流向來更改元素的排列方向。
direction屬性用來設(shè)置文本、表列水平溢出的方向。?rtl?表示從右到左，?ltr?表示從左到右。

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

對(duì)應(yīng)上面的flex布局，通過設(shè)置文檔的水平流向來更改文檔的起始位置：

direction: rtl;

如果是行內(nèi)元素，只需要更改水平流向即可實(shí)現(xiàn)元素的左右對(duì)齊。

.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用于定義元素的邏輯內(nèi)聯(lián)結(jié)束邊距。

這里需要注意，margin-inline-end是受direction屬性影響的，如果文檔的水平流向?yàn)橛蚁蜃?，那?br>margin-inline-end相當(dāng)于margin-right
margin-inline-start相當(dāng)于margin-left
如果文檔的水平流向?yàn)樽笙蛴遥敲?br>margin-inline-end相當(dāng)于margin-left
margin-inline-start相當(dāng)于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表示結(jié)束位置（右）
上面的幾種邏輯屬性都會(huì)受到direction屬性影響，使用時(shí)需要注意。

margin、padding都可以通過inline、block、start、end組合變?yōu)閏ss邏輯屬性。
padding-inline-start: 20px;margin-inline-start: 20px; ............

流的應(yīng)用除了更改文檔的水平流以外，還可以用來做對(duì)稱布局，例如微信聊天頁(yè)，更改direction的水平流向，即可實(shí)現(xiàn)微信的自身和對(duì)方的聊天氣泡定位。

<!-- 微信聊天頁(yè) --><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><!-- 微信聊天頁(yè)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; ?/* 更改水平流向?yàn)橄蛴?*/ ? ? ? ?display: flex; ? ? ? ?.wx_image{ ? ? ? ?width: 50px; ? ? ? ?height: 50px; ? ? ? ?font-size: 12px; ? ? ? ?text-align: center; ? ? ? ?line-height: 50px; ? ? ? ?border: 1px solid red; ? ? ? ?} ? ?} }