flex的使用以及布局
1.新增flex屬性後的區別12
3456
78910
1112
1314
1516
1718
1920
2122
2324
2526
2728
複製**
我是flex-content
我是flex-content
我是flex-content
我是flex-content2
我是flex-content2
我是flex-content2
我是common-content
我是common-content
我是common-content
複製**
效果如下：
ff47,360,chrome40基本一致,ie10卻不支援，查了下是版本問題,flex是新版本ie11之後才使用的，ie10及以前使用的屬性是flexbox;，增加display:-ms-flexbox;就支援了。
flexbox布局的語法經過幾年發生了很大的變化，也給flexbox的使用帶來一定的侷限性，因為語法版本眾多，瀏覽器支援不一致，致使flexbox布局使用不多。flexbox布局主要有三種語法版本：
2009版本，我們稱之為老版本，使用的是「display:box」或者「display:inline-box」；
2011版本，我們稱之為混合版本，使用的是「display:flexbox」或者「display:inline-flexbox」；
2013版本，也就是最新語法版本，使用的是「display:flex」或者「display:inline-flex」。
2.基本概念
引用阮一峰老師對其的描述如下：
採用flex布局的元素，稱為flex容器（flex container），簡稱"容器"。
它的所有子元素自動成為容器成員，稱為flex專案（flex item），簡稱"專案"。
容器預設存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。
專案預設沿主軸排列。單個專案佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。
以下6個屬性設定在容器上。
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
2.1 flex-direction屬性
flex-direction屬性決定主軸的方向（即專案的排列方向）。
.flex-box
row（預設值）：主軸為水平方向，起點在左端。
row-reverse：主軸為水平方向，起點在右端。
column：主軸為垂直方向，起點在上沿。
column-reverse：主軸為垂直方向，起點在下沿。
1我是flex-content
2我是flex-content
3我是flex-content
以row-reverse的屬性為例的效果：
2.2 flex-wrap屬性
預設情況下，專案都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。12
3.flex-box
nowrap ：預設，不換行
wrap ：換行，第一行在上方
wrap-reverse ：換行，第一行在下方
預設屬性的顯示效果：
ie，ff，360如圖效果
chorme如下圖效果：
不同瀏覽器的顯示效果有所不同，但其實都是當容器比專案的小的時候，就會被撐大，但是撐到最大也只能是當前瀏覽器的寬度，但是ie，ff，360裡面專案的大小因為單詞把其撐大了，不能跟著瀏覽器的寬度變小而縮小，而chorme卻不一樣，不會因為專案的文字而把專案撐大。
當使用wrap屬性時
2.3 flex-flow屬性
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。
.flex-box
2.4 justify-content屬性
justify-content屬性定義了專案在主軸上的對齊方式。
.flex-box
它可能取5個值，具體對齊方式與軸的方向有關。下面假設主軸為從左到右。
flex-start（預設值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊，專案之間的間隔都相等。
space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。
2.5 align-items屬性
.flex-box
它可能取5個值。具體的對齊方式與交叉軸的方向有關，下面假設交叉軸從上到下。
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 專案的第一行文字的基線對齊。
stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。
3.6 align-content屬性
align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。
.flex-box
複製**
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（預設值）：軸線佔滿整個交叉軸(如果專案未設定高度或設為auto時，並且align-item連用，否則失效）
)複製**
3.專案的屬性
以下6個屬性設定在專案上。
複製**
order
flex-grow
flex-shrink
flex-basis
flex
align-self
複製**
3.1 order屬性
order屬性定義專案的排列順序。數值越小，排列越靠前，預設為0。
.item
如下設定：
css複製**
複製**
html
複製**
1我是flex-content
2我是flex-content
3我是flex-content
4我是flex-content
複製**
效果如下圖顯示：
同樣垂直方向也適用
3.2 flex-grow屬性
flex-grow屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。
.item
如果所有專案的flex-grow屬性都為1，則它們將等分剩餘空間（如果有的話）。如果乙個專案的flex-grow屬性為2，其他專案都為1，則前者佔據的剩餘空間將比其他項多一倍。
如圖所示：
容器的寬度是1000px，專案的都設了100px；那麼剩餘空間就是1000-3*100=700px;按照剩餘空間1:2:1的分配，就是175:350:175，最後得到如圖顯示效果。
3.3 flex-shrink屬性
flex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。
.item
如果所有專案的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果乙個專案的flex-shrink屬性為0，其他專案都為1，則空間不足時，前者不縮小。
負值對該屬性無效。
效果如圖：
3.4 flex-basis屬性
flex-basis屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小
.item
它可以設為跟width或height屬性一樣的值（比如350px），則專案將佔據固定空間。
3.5 flex屬性
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。
.item
該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。
3.6 align-self屬性
align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
.item
父元素的align-items為flex-end；如圖
該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致。
flex 布局以及樣式
1.flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性 2.任何乙個容器都可以用flex布局 注意，設為flex布局以後，子元素的float clear和vertical align屬性將失效 採用flex布局的元素，稱為flex容器 flex containe...
flex布局以及原理
flex是 flexible box的縮寫,意為彈性布局,用來為盒狀模型提供最大的靈活性,任何乙個容器都可以指定為flex布局 當我們為父盒子設為flex布局以後,子元素的loat clear和 vertical align 屬性將失效.伸縮布局 彈性布局 伸縮盒布局 彈性盒布局 flex布局 採用...
flex應用以及flex應用出現對齊問題解析
flex flex flex direction flex direction column justify content justify content start justify content end justify content center justify content space ...