所謂道生
一、一生
二、二生
三、三生萬物。由flex的基本屬性jiflex除了可以實現多個盒子自適應螢幕寬度以外，還可以處理某一行或一列的布局，如在一行上讓元素兩端對齊flex兩端對齊，千里之行始於足下，想要了解flex基本的屬性，請閱flex自適應布局。
1、一對多布局
一行對齊多列或者一列對多行，以下給出一列對多行例子，如圖：
1為乙個盒子，2、3在乙個盒子裡；大容器為橫向布局、2、3所在的小容器為縱向布局。
2、一對多對一
在以上的基礎上再多加個div，效果如下：
在二維空間，只有兩根軸，在計算好容器範圍與容器間距的情況下，理論情況二位平面布局基本可以使用flex來實現，不過有些較為複雜，需要使用其他的手段。上圖就是分三個盒子，1、2和3、4。
3、復合組合
在以上的基礎上再往外包一層，可以實現如下效果，如圖：
這種一層套一層的flex布局方法，需要計算好父盒子高度以及子盒子與子盒子間距，這樣才能讓各個盒子進行對齊。其次子盒子寬高度也會在父盒子中進行自適應，這也是flex優勢之一。
以上布局**如下：
//html**12
3 4
5//css**
.flex-column-reverse
.flex-display
.wrap-3
.wrap-4
#box
.box1
.box2
.box3
flex布局應用
flex介紹 了解了flex布局之後,發現其功能非常強大.當指定乙個div display flex之後,裡面的子元素會按flex布局.常用的冊格,各種經典網頁布局,如上左右下,還有一些難搞的css,如內容不佔滿整頁時,footer會上移,而不是在頁面底部等等.這些情況下使用flex可以輕鬆簡潔的實...
flex布局實戰應用
如下圖，訂單列表裡的標題 需求是 地名1 地名2 現實情況可能有以下五種情況 兩個地名都很短 兩個地名都很長 地名1很長，地名2很短 地名1很短，地名2很長 地名1和地名2差不多長 看到上面的需求，我們自然而然能想到的就是使用flex布局 先寫個demo html如下 div class wrap ...
flex布局 Flex布局
摘要 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序 以最佳方式填充可用空間 主要是為了適應所有型別的顯示裝置和螢幕大小 作者 星星 flex 是 flexible box 的縮寫，意為 彈性布局 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序...