怎樣快速入門CSS3彈性盒模型flex box，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。
目前創(chuàng)新互聯(lián)已為上千的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁空間、網(wǎng)站改版維護、企業(yè)網(wǎng)站設(shè)計、新市網(wǎng)站維護等服務(wù)，公司將堅持客戶導向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
在css上使用flex的語法
display: flex; /*按照需求加入各瀏覽器需求前綴*/
flex-direction
(適用于父類容器元素)
flex-direction:row;
a
b
c
flex-direction:row-reverse;
a
b
c
flex-direction:column;
a
b
c
flex-direction:column-reverse;
a
b
c
flex-wrap
(適用于父類容器元素)
設(shè)置或檢索伸縮盒對象的子元素超出父容器時是否換行。
flex-wrap: nowrap | wrap | wrap-reverse
flex-wrap:nowrap;
a
b
c
flex-wrap:wrap;
a
b
c
flex-wrap:wrap-reverse;
a
b
c
flex-flow
(適用于父類容器元素)
相當于direction和wrap的集合
flex-flow: row nowrap;/* 順序排列且不換行 */
flex-flow:row-reverse wrap;/* 反序排列且自動換行 */
justify-content
(適用于父類容器元素)
設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。
justifu-content: flex-start | flex-end | center | space-between | space-around
justify-content:flex-start;
a
b
c
justify-content:flex-end;
a
b
c
justify-content:center;
a
b
c
justify-content:space-between;
space-between：彈性盒子元素會平均地分布在行里。如果最左邊的剩余空間是負數(shù)，或該行只有一個子元素，則該值等效于'flex-start'。在其它情況下，第一個元素的邊界與行的主起始位置的邊界對齊，同時最后一個元素的邊界與行的主結(jié)束位置的邊距對齊，而剩余的伸縮盒項目則平均分布，并確保兩兩之間的空白空間相等。
a
b
c
justify-content:space-around;
space-around：彈性盒子元素會平均地分布在行里，兩端保留子元素與子元素之間間距大小的一半。如果最左邊的剩余空間是負數(shù)，或該行只有一個伸縮盒項目，則該值等效于'center'。在其它情況下，伸縮盒項目則平均分布，并確保兩兩之間的空白空間相等，同時第一個元素前的空間以及最后一個元素后的空間為其他空白空間的一半。
a
b
c
align-items
(適用于父類容器元素)
設(shè)置或檢索彈性盒子元素在側(cè)軸（縱軸）方向上的對齊方式。
align-items: flex-start | flex-end | center | baseline | stretch
align-items:flex-start;
a
b
c
align-items:flex-end;
a
b
c
align-items:center;
a
b
c
align-items:baseline;
baseline：如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。
a
b
c
align-items:strecth;
stretch：如果指定側(cè)軸大小的屬性值為'auto'，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。
a
b
c
align-content
(適用于父類容器元素)
設(shè)置或檢索彈性盒堆疊伸縮行的對齊方式。
align-content: flex-start | flex-end | center | space-between | space-around | stretch
align-content:flex-start;
a
b
c
d
e
f
align-content:flex-end;
a
b
c
d
e
f
align-content:center;
a
b
c
d
e
f
align-content:space-between;
a
b
c
d
e
f
align-content:space-around;
a
b
c
d
e
f
align-content:strecth;
a
b
c
d
e
f
flex-grow
(適用于子元素)
設(shè)置或檢索彈性盒的擴展比率。根據(jù)彈性盒子元素所設(shè)置的擴展因子作為比率來分配剩余空間。flex-grow的默認值為0，如果沒有顯示定義該屬性，是不會擁有分配剩余空間權(quán)利的。本例中b,c兩項都顯式的定義了flex-grow，可以看到總共將剩余空間分成了4份，其中b占1份，c占3分，即1:3
flex-grow:
a
b
flex-grow:1
c
flex-grow:2
d
e
flex-shrink
(適用于子元素)
設(shè)置或檢索彈性盒的收縮比率（根據(jù)彈性盒子元素所設(shè)置的收縮因子作為比率來收縮空間。
flex-shrink:
flex-basis
(適用于子元素)
設(shè)置或檢索彈性盒伸縮基準值。如果所有子元素的基準值之和大于剩余空間，則會根據(jù)每項設(shè)置的基準值，按比率伸縮剩余空間
flex-basis:
a
b
c
flex-basis:600px;
d
e
flex(復合屬性)
(適用于子元素)
flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
none：none關(guān)鍵字的計算值為: 0 0 auto
[ flex-grow ]：定義彈性盒子元素的擴展比率。
[ flex-shrink ]：定義彈性盒子元素的收縮比率。
[ flex-basis ]：定義彈性盒子元素的默認基準值。
看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。
重慶分公司
重慶分公司
