flexbox 的簡介：
創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設、高性價比塔城網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式塔城網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設找我們，業(yè)務覆蓋塔城地區(qū)。費用合理售后完善，十余年實體公司更值得信賴。flexbox 是 2009 年 W3C 提出的一種全新的可伸縮的 CSS 布局方式。依賴 flexbox，我們可以更簡單，高效的完成可伸縮式頁面的布局。flexbox 一共經(jīng)歷了三個版本，分別為 old，tweener，new，這三種版本下的 display 屬性值不一樣，分別為 "display: box"，"display: flexbox"，"display: flex"。flexbox 中有兩個非常重要的概念：flex container（flex 容器） 和 flex item（flex 項目），當我們給一個元素添加一個 "display: flex" 屬性后，這個元素就會變成一個 flex container ，它的直接子元素就會變成 flex item 成為一個 flex container 成員。特別是當我們給一個元素設置成 flex container 時，會在文檔中生成一個伸縮容器，伸縮容器會為子元素內(nèi)容生成一個伸縮容器上下文（FFC）。伸縮容器不是塊容器，所以 flex item 不能使用那些用來控制塊元素布局的屬性，例如，clear，float，vertical-align 屬性。
PS：flex container 默認存在兩根軸線：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做 main start，結(jié)束位置叫做 main end；交叉軸的開始位置叫做 cross start，結(jié)束位置叫做 cross end。flex 項目默認沿主軸排列。單個項目占據(jù)的主軸空間叫做 main size，占據(jù)的交叉軸空間叫做 cross size。
flexbox 的屬性分為兩類： 一類為 flex 容器的屬性，另一類為 flex 項目的屬性。
flexbox 容器的屬性：
justify-content
align-items
flex-direction
flex-wrap
flex-flow
align-content
flexbox 項目的屬性：
order
flex-grow
flex-shrink
flex-basis
flex
align-self
1、justify-content 用來設置 flex item 在主軸方向上的對齊方式
具體示例：
#container {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: center;
}
.item {
width: 100px;
height: 200px;
border: 1px solid #000;
}
justify-content 屬性的值有：flex-start | flex-end | center | space-around | space-between。
flex-start：默認值，flex container 內(nèi)所有的 flex item 在主軸上按從左至右方向排列（左對齊）；
flex-end：flex container 內(nèi)所有的 flex item 在主軸上按從右至左方向排列（右對齊）；
center：flex container 內(nèi)所有的 flex item 在主軸上居中對齊；
space-around：每個 flex item 兩側(cè)的間隔相等并且項目之間的間隔比項目與邊框的間隔大一倍；
space-between：兩端對齊，項目之間的間隔都相等；
2、align-items 用來設置 flex item 在交叉軸方向上的對齊方式
具體示例：
#container {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
align-items: center;
}
align-items 屬性的值有：flex-start | flex-end | center | baseline | stretch。
flex-start：flex container 內(nèi)所有的 flex item 在交叉軸上按從上至下方向排列（頂部對齊）；
flex-end：flex container 內(nèi)所有的 flex item 在交叉軸上按從下至上方向排列（底部對齊）；
center：flex container 內(nèi)所有的 flex item 在交叉軸上居中對齊；
baseline：所有 flex item 中的第一行文字的基線對齊；
stretch：默認值，如果 flex item 沒有設置高度或為 auto，flex item 將會占滿整個容器的高度；
3、flex-direction 用來設置主軸的方向
具體示例：
#container {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-direction: column;
}
flex-direction 屬性的值有：row | row-reverse | column | column-reverse。
row：默認值，主軸在水平方向上，起點在左端；
row-reverse：主軸在水平方向上，起點在右端；
column：主軸在垂直方向上，起點在上沿；
column-reverse：主軸在垂直方向上，起點在下沿；
4、flex-wrap 用來設置 flex item 是否進行多行并反轉(zhuǎn)排列
具體示例：
#container {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-wrap: wrap;
}
flex-wrap 屬性的值有：nowrap | wrap | wrap-reverse。
nowrap：默認值，所有的 flex item 排列在一條水平的軸線上，不換行；
wrap：換行，第一行在上方；
wrap-reverse：換行，第一行在下方；
5、flex-flow 屬性是 flex-direction 屬性和 flex-wrap 屬性的簡寫形式，默認值為 row nowrap
具體示例：
#container {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-flow: column-reverse wrap-reverse;
}
flex-flow 屬性的值有：row | row-reverse | column | column-reverse | nowrap | wrap | wrap-reverse。
6、align-content 屬性定義了多根軸線的對齊方式，如果容器只有一根軸線，該屬性不起作用
具體示例：
#container {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
align-content: center;
}
align-content 屬性的值有：flex-start | flex-end | center | space-around | space-between | stretch。
flex-start：與交叉軸的起點對齊；
flex-end：與交叉軸的終點對齊；
center：與交叉軸的中點對齊；
space-around：每根軸線的兩側(cè)間隔相等，并且軸線之間的間隔比軸線與邊框的間隔大一倍；
space-between：與交叉軸的兩端對齊，并且軸線之間的間隔都相等；
stretch：默認值，軸線將占滿整個交叉軸；
7、order 屬性用于調(diào)整 flex item 的順序（數(shù)值越大，排列越靠后）
具體示例：
#container {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
.item {
width: 100px;
height: 200px;
border: 1px solid #000;
order: 1;
}
order 屬性的值有：-1 | 0 | 1 | integer，默認值為 0。
8、flex-grow 屬性用于定義 flex item 的放大比例（設置負值無效）
具體示例：
#container {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
.item {
width: 100px;
height: 200px;
border: 1px solid #000;
flex-grow: 1;
}
flex-grow 屬性的值：number，默認值為 0，即存在剩余空間也不放大。
PS：如果所有 flex item 的 flex-grow 屬性值都為 1，則它們將等分剩余空間（如果有的話）。如果一個項目的 flex-grow 屬性值為 2，其他項目都為 1，則前者占據(jù)的剩余空間將比其他項目多一倍。
9、flex-shrink 屬性用于定義 flex item 的縮小比例（設置負值無效）
具體示例：
#container {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
.item {
width: 100px;
height: 200px;
border: 1px solid #000;
flex-shrink: 1;
}
flex-shrink 屬性的值：number，默認值為 1，即空間不足該項目將縮小。
PS：如果所有項目的 flex-shrink 屬性值都為 1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink 屬性值為 0，其他項目都為 1，則空間不足時，前者將不會縮小。
10、flex-basis 屬性用于定義 flex item 占據(jù)主軸空間的大小
具體示例：
#container {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
.item {
width: 100px;
height: 200px;
border: 1px solid #000;
flex-basis: 100%;
}
flex-basis 屬性的值：length，默認值為 auto，即項目的本來大小。也可以設置固定值，如500px。
特別注意當 flex-basis 值為 0 時 flex item 分配的是容器所有的空間；當 flex-basis 值為 auto 時 flex item 分配的是容器減去所有 flex item 內(nèi)容之后剩余的容器空間。
11、flex 屬性是 flex-grow，flex-shrink 和 flex-basis 屬性的簡寫形式，默認值為 0 1 auto
具體示例：
#container {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
.item {
width: 100px;
height: 200px;
border: 1px solid #000;
flex: 1 100%;
}
flex 屬性的值有兩個縮寫 none（0 0 auto），auto（1 1 auto）。
12、align-self 屬性用于設置單個項目與其他的項目不一樣的對齊方式，可覆蓋容器的 align-items 屬性
具體示例：
#container {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
.item {
width: 100px;
height: 200px;
border: 1px solid #000;
align-self: flex-end;
}
align-self 屬性的值有：flex-start | flex-end | center | baseline | stretch | auto。
flex-start：flex container 內(nèi)所有的 flex item 在交叉軸上按從上至下方向排列（頂部對齊）；
flex-end：flex container 內(nèi)所有的 flex item 在交叉軸上按從下至上方向排列（底部對齊）；
center：flex container 內(nèi)所有的 flex item 在交叉軸上居中對齊；
baseline：所有 flex item 中的第一行文字的基線對齊；
stretch：如果 flex item 沒有設置高度或為 auto，flex item 將會占滿整個容器的高度；
auto：默認值，繼承容器的 align-items 屬性。如果容器沒有該屬性，則等同于 stretch；
PS：一個好玩的 flexbox 學習網(wǎng)站：http://flexboxfroggy.com/#zh-cn
flexbox bugs 問題及解決方法：https://github.com/philipwalton/flexbugs
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。
重慶分公司
重慶分公司
