注意： flexbox布局最適合應用程式的元件和小規模布局，而grid布局則適用於更大規模的布局談flex布局前先了解下flex的基本屬性
flex的基本屬性有flex-basis、flex-direction、flex-wrap、flex-flow、flex-grow、flex-shrink六個
"main">
'showdiv' style="background-color:coral;">
'showdiv' style="background-color:lightblue;">
'showdiv' style="background-color:lightgreen;">
注意:internet explorer 9 及更早版本不支援 flex 屬性。
注意:internet explorer 10 通過 -ms-flex 屬性來支援。 ie11 及更新版本完全支援 flex 屬性 (不需要 -ms- 字首)。
注意:safari 6.1 (及更新瀏覽器) 通過 -webkit-flex 屬性支援。
複製**
這裡的#main div讓所有彈性盒模型物件的子元素都有相同的長度，忽略它們內部的內容。因此看到的三個div寬度相等
1. flex 屬性用於設定或檢索彈性盒模型物件的子元素如何分配空間。
2. 如果元素不是彈性盒模型物件的子元素，則 flex 屬性不起作用。
[toc]
flex-basis 用於設定彈性盒子初始大小或伸縮基準值
例如設定第二個彈性盒子元素的初始長度為126畫素，css設定如下：
#main div:nth-of-type(2)
複製**
可以看到第二個背景為藍色的div寬度為126px，其餘兩個div寬度為87px。這是因為上面第二個div設定了flex-basis: 40px;,導致id為#main的大div（父級盒子）優先分配給第二個div 40px的寬度，剩下的260px寬度再平均分配給三個子級div（因為前面設定了#main div，所以三個div都擁有相同的長度/寬度）。
簡而言之，flex-basis就是從父級中提前取出一定大小的長度提前分配給指定元素。
flex-direction 用於設定彈性盒子內子元素的排列放向。
flex-direction常用的的屬性值有：row、row-reverse、column、column-reverse，分別對應：按行排列、按行反序排列、按列排列、按列反序排列。
例如設定#main盒子內的元素按行反序排列：
#main
複製**
可以看到原來從左至右的div背景為紅藍綠，設定後從左至右的div背景為綠藍紅，順序剛好反過來了。 如果設定如下：
#main
複製**
flex-wrap 用於規定flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。
flex-wrap 常用的屬性值有：nowrap、wrap、wrap-reverse。
nowrap為預設值，規定靈活的專案不拆行或不拆列。
wrap規定靈活的專案在必要的時候拆行或拆列。
wrap-reverse規定靈活的專案在必要的時候拆行或拆列，但是以相反的順序。 例如html部分設定如下：
"main">
"background-color:coral;">a
"background-color:lightblue;">b
"background-color:khaki;">c
"background-color:pink;">d
"background-color:lightgrey;">e
"background-color:lightgreen;">f
複製**
#main
#main div
複製**
flex-wrap: wrap;，六個div寬度總和300px超出了#main父元素的寬度，子元素div將自動換行排列。
結果顯示如下：
如果將flex-wrap: wrap;設定為：flex-wrap: wrap-reverse;，那麼當發生換行(列)時，將會反序排列。 效果如下：
如果將flex-wrap: wrap;設定為：flex-wrap:nowrap;，那麼子元素div將不會換行排列(不是超出部分不顯示了，而是子元素div的寬度將改變以適應父元素寬度)，效果如下：
flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的復合屬性。flex-flow 屬性用於設定或檢索彈性盒模型物件的子元素排列方式。flex-direction 屬性規定靈活專案的方向。
flex-flow 預設值為：flex-flow:row nowrap;css語法為：
flex-flow: flex-direction flex-wrap | initial | inherit;flex-grow 屬性用於設定或檢索彈性盒的擴充套件比率。 例如在最初的模板中給css設定：
#main div
#main div:nth-of-type(1)
#main div:nth-of-type(2)
#main div:nth-of-type(3)
複製**
#main div,效果如下：
此處設定了每個div的flex-basis:50px;，即每個div基礎寬度為50px；而容器總寬度為300px，超出div總寬度150px。剩下的寬度按照 flex-grow 分配的1、3、1這樣將150px平均分成五份再根據各自的份數加上div基礎寬度，所以第乙個div寬度為： 50+（150/5）* 1 = 80 px ； 類似的第二個div寬度為： 50 + （150/5） * 3 = 140px。
flex-shrink 屬性用於設定或檢索彈性盒的收縮比率。
但是，flex-shrink計算收縮量的演算法並不同於flex-grow。flex-shrink計算收縮量的演算法使用的是一種加權平均數的演算法。
例如在最初的模板中給css設定：
#main div:nth-of-type(1)
#main div:nth-of-type(2)
#main div:nth-of-type(3)
複製**
可以看到三個div的寬度分別是：167px、50px、83px。
具體演算法如下：
先算出超出的寬度：a=200+100+100-300=100px
超出的100px將按照收縮比1:3:1收縮。
在算出每個元素的乘積(用自身寬度乘以分配的權重（flex-shrink）)：
計算每個元素收縮量
計算每個元素實際寬度
關於flex布局
任何乙個容器都可以指定為flex 布局。box行內元素也可以使用flex布局。box需要注意的是，設為flex布局以後，子元素的float clear和vertical align屬性將失效弄清楚 幾個基本的概念 我們知道盒子模型 下面可以理解為 flex 模型 容器預設存在兩根軸 水平的主軸 ma...
css布局之flex布局
網頁布局 layout 是css的乙個重點應用。布局的傳統解決方案，基於盒狀模型，依賴 display屬性 position屬性 float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。2009年，w3c提出了一種新的方案 flex布局，可以簡便 完整 響應式地實現各種頁面布局。目...
css彈性布局（flex）
1 概念解讀 傳統的布局解決方案，基於盒狀模型，依賴 display 屬性 position屬性 float屬性。但對於一些特殊的布局方式 如垂直居中 傳統盒模型顯得有點力不從心，而對彈性布局 flex 來說卻很容易實現。2009年，w3c 提出了一種新的方案 flex 布局 flex是flexib...