如下圖，訂單列表裡的標題 ，需求是：地名1——地名2；
現實情況可能有以下五種情況 ：
兩個地名都很短；
兩個地名都很長；
地名1很長，地名2很短；
地名1很短，地名2很長；
地名1和地名2差不多長；
看到上面的需求，我們自然而然能想到的就是使用flex布局
先寫個demo：
html如下：
<css：div
class
="wrap"
>
<
div
class
="item"
>這個例子演示
div>
<
div
class
="item"
>
div>
<
div
class
="item"
>這個例子演示了
div>
div>
.wrap.item.item:nth-of-type(1).item:nth-of-type(3)結果如下：
上面的demo看似滿足了需求，實際還有幾個細節問題：
中間箭頭的寬度是固定的，可以不占用彈性空間；
解決方法：
.item:nth-of-type(2)結果：
地名1比較短的時候，依然佔據了很大的空間；
解決方法：第乙個item不占用彈性空間；
.item:nth-of-type(1)結果：
極端情況 下，短內容跟長內容都顯示。。。了（常理應該是不是特別長的情況下，短內容顯示完）；
極端情況：
解決方法：給item加個最小寬度（具體值根據業務場景來決定）
.item:nth-of-type(1)顯示結果：
可以點選如下鏈結檢視完整demo：
flex布局實戰
1.實現盒子的水平垂直居中 2.子元素水平排列一行，均分父元素寬度 如果採用百分比實現，當子元素個數變化時需要修改樣式，用flex布局則不需要 3.左側固定寬度，右側寬度隨父容器寬度變化而變化布局 box.left.right div class box div class left 1 div d...
flex布局應用
所謂道生 一 一生 二 二生 三 三生萬物。由flex的基本屬性jiflex除了可以實現多個盒子自適應螢幕寬度以外，還可以處理某一行或一列的布局，如在一行上讓元素兩端對齊flex兩端對齊，千里之行始於足下，想要了解flex基本的屬性，請閱flex自適應布局。1 一對多布局 一行對齊多列或者一列對多行...
flex布局應用
flex介紹 了解了flex布局之後,發現其功能非常強大.當指定乙個div display flex之後,裡面的子元素會按flex布局.常用的冊格,各種經典網頁布局,如上左右下,還有一些難搞的css,如內容不佔滿整頁時,footer會上移,而不是在頁面底部等等.這些情況下使用flex可以輕鬆簡潔的實...