傳統布局的核心是盒子模型，依賴display屬性 +position屬性 +float屬性。可以看出來傳統布局非常容易實現像 word 左對齊，右對齊這樣的功能，可以說，傳統布局更適合於文字排版。
但是，對於垂直居中這樣一些布局，以及響應式開發，雖說可以實現，但是卻不夠效率。使用flex布局則有這些優勢：
1、彈性盒子模型：
要靈活運用flex提供的便利，首先需要了解的是它盒子中貫徹的概念：
flex中的所有屬性都基於這兩條軸產生作用。
使用flex彈性盒子的方法很簡單，就是在元素的樣式中加入display:flex，那麼該元素包含的子元素都將對flex的容器屬性產生作用。
這裡又需要區分乙個概念，flex是有容器屬性和子元素屬性的，所謂容器屬性，就是只能在父容器（父元素）中設定樣式，對所有子元素產生效果的屬性，而子元素屬性，則是在已經設定了display:flex的父元素下的子元素，自身可以設定的屬性。
1、flex-direction
定義子元素在主軸（mian axis）的排列方向
div定義元素是否換行
div子元素在主軸（main axis）上的對齊方式
div定義了多根主軸線內元素在交叉軸（cross axis）上的對齊方式。如果整個父容器內只有一行子元素，則該屬性無效
div子元素在交叉軸（cross axis）上的對齊方式
divflex彈性布局屬性詳解！
詳細看下flex彈性布局具體屬性 flex容器屬性詳解 flex direction row column 橫排 豎排 決定元素的排列方向 flex wrap nowrap wrap wrap reverse 翻轉 排列不下時如何排，預設排不下就壓縮進行排 flex flow是 flex direc...
CSS display flex 彈性布局屬性
display flex 是一種布局方式。它即可以應用於容器中，也可以應用於行內元素。是w3c提出的一種新的方案，可以簡便 完整 響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支援。flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。設為flex布局以...
Flex布局屬性學習整理
a.使用在容器上的六大屬性值 1.flex direction 2.flex wrap 3.flex flow 4.justify content 5.align items 6.align content 1.flex direction屬性決定主軸的方向，即專案的排列方式 有四個值可供選擇 ro...