簡要介紹
flex 即 flexible box 彈性布局盒模型，,是2009年 w3c 提出的一種新型布局的屬性，引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進(jìn)行排列、對齊和分配空白空間。瀏覽器支持如下：
flex 盒子模型的出現(xiàn)主要是為了解決基于 display+position+float 的處理部分情況的不便，比如居中布局：
使用定位：
.father{
width: 400px;
height: 400px;
position: relative;
}
.children{
width: 100px;
height: 100px;
position: absolute;
top: 50%;
height: 50%;
margin-left: -50px;
margin-top: -50px;
}
使用 flex 情況：
.father{
width: 400px;
height: 400px;
display: flex;
justify-content:center;
align-items:center;
}
.children{
width: 100px;
height: 100px;
}
可以看見如果使用了 flex，就很就簡單了。justify-content 和 align-items 分別定義了伸縮項目沿著主軸線的對齊方式和伸縮項目沿著縱軸對齊方式，F(xiàn)lex 的好處遠(yuǎn)遠(yuǎn)不止這些，下面我們來看下 w3c 定義的基本屬性。
基本概念
主軸（main axis）：沿著一個伸縮容器的主軸配置伸縮項目，主軸是主軸方向的延伸。
縱軸（cross axis）：與主軸垂直的軸稱作側(cè)軸，是側(cè)軸方向的延伸。
容器屬性
3.1 Flex-direction
flex-direction 會決定主軸的方向，它的值如下:
row（默認(rèn)）：橫向排列（左對齊）。
row-reverse：反轉(zhuǎn)橫向排列。
column：縱向排列。
column-reverse：反轉(zhuǎn)縱向排列。
Flex-wrap
nowrap - 默認(rèn)，彈性容器為單行。
wrap - 彈性容器為多行。
Flex-flow
flex-flow 是 flex-direction 和 flex-wrap 的簡寫，可同時賦值 ， 默認(rèn) row nowrap。
Justify-content
flex-start（默認(rèn)值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊。
space-around：彈性項目平均分布在該行上，兩邊留有一半的間隔空間。
Align-items
flex-start：縱軸的起點對齊。
flex-end：縱軸的終點對齊。
center：縱軸的中點對齊。
baseline: 項目的第一行文字的基線對齊。
stretch（默認(rèn)）：如果指定側(cè)軸大小的屬性值為'auto'，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸。
Align-conten
flex-start：與縱軸的起點對齊。
flex-end：與縱軸的終點對齊。
center：與縱軸的中點對齊。
space-between：與縱軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認(rèn)值）：軸線占滿整個縱軸。
項目屬性
Flex
該屬性有兩個快捷值：auto (1 1 auto) ，none (00 auto)。
Order
屬性定義項目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0
Flex-grow
flex-grow 定義彈性盒子元素的擴展比率 ，默認(rèn)為0，即如果存在剩余空間，也不放大，如果所有項目的 flex-grow 屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個項目的flex-grow 屬性為2，其他項目都為1，則前者占據(jù)的剩余空間將比其他項多一倍。
Flex-shrink
flex-shrink 屬性定義了項目的縮小比例，默認(rèn)為1，即如果空間不足，該項目將縮小，如果所有項目的 flex-shrink 屬性都為1，當(dāng)空間不足時，都將等比例縮小。如果一個項目的 flex- shrink 屬性為0，其他項目都為1，則空間不足時，前者不縮小。負(fù)值對該屬性無效。
Flex-basis
flex-basis 定義彈性盒子元素的收縮比率，項目占據(jù)的主軸空間（mainsize）。瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間。它的默認(rèn)值為 auto，即項目的本來大小。它可以設(shè)為跟 width 或 height 屬性一樣的值（比如 350px），則項目將占據(jù)固定空間。
Align-self
align-self 在彈性子元素上使用。覆蓋容器的 align-items 屬性。默認(rèn)值為 auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同于 stretch。align-self 除了 auto，其他與 align-items 屬性基本一致。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
重慶分公司
重慶分公司
