由于在日常工作中使用css或者bootstrap的柵格系統(tǒng)已經(jīng)能很好的滿足業(yè)務(wù)需求，所以一直以來對css3的彈性布局不是很感冒。

近日有幸在一篇文章中領(lǐng)略了flex的魅力--簡潔優(yōu)雅。隨試之。

/*容器*/.flex{display: flex;display: -webkit-flex;/*Webkit內(nèi)核的瀏覽器，必須加上-webkit前綴。*//*注意，設(shè)為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。*/flex-direction: row;/*決定主軸的方向，即子項目（子元素）橫向排列還是縱向排列*//*row（默認(rèn)值）：主軸為水平方向，起點在左端。row-reverse：主軸為水平方向，起點在右端。column：主軸為垂直方向，起點在上沿。column-reverse：主軸為垂直方向，起點在下沿。*/flex-wrap:nowrap;/*定義如果一條軸線排不下，如何換行*//*nowrap（默認(rèn)）：不換行。wrap：換行，第一行在上方。wrap-reverse：換行，第一行在下方。*/justify-content: flex-start;/*定義了項目在主軸上的對齊方式。*//*flex-start（默認(rèn)值）：左對齊flex-end：右對齊center： 居中space-between：兩端對齊，項目之間的間隔都相等。space-around：每個項目兩側(cè)的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。*/align-items: flex-start;/*定義項目在交叉軸上如何對齊。*//*flex-start：交叉軸的起點對齊。flex-end：交叉軸的終點對齊。center：交叉軸的中點對齊。baseline: 項目的第一行文字的基線對齊。stretch（默認(rèn)值）：如果項目未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度。*/}/*項目，容器里的子元素默認(rèn)成為項目，并擁有項目的默認(rèn)屬性*/.flex-item{order:0;/*定義項目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。*/flex-grow:0;/*定義項目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。*//*如果所有項目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據(jù)的剩余空間將比其他項多一倍。*/flex-shrink:1;/*定義了項目的縮小比例，默認(rèn)為1，即如果空間不足，該項目將縮小。*/flex-basis:auto;/*定義了在分配多余空間之前，項目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間。它的默認(rèn)值為auto，即項目的本來大小。*/flex:0 1 auto;/*flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認(rèn)值為0 1 auto。后兩個屬性可選。*/align-self:auto;/*允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性*/}

以上就是flex相關(guān)的所有屬性。詳情可以參考?阮一峰大神的博文，很詳細(xì)哦！

現(xiàn)在開始實戰(zhàn)，寫兩個常用的布局。

1、圖文列表。

這是效果圖，下面開始上代碼。

<!--圖文列表--><div class="container1"><div class="left"></div><div class="right"><div class="title">帥舅舅</div><div class="desc vertical-center"><span>JavaScript全棧工程師成長中……</span></div></div></div> .container1{display: flex;display: -webkit-flex;flex-direction: row;height: 50px;}.left{flex: 0 1 50px;background-color: lightblue;}.right{display: flex;display: -webkit-flex;flex-direction: column;flex: 1 1 auto;}.title{flex: 0 1 20px;background-color: lightcyan;}.desc{flex: 1 1 auto;background-color: lightgray;font-size: 12px;color: #666;}.vertical-center{/*彈性布局實現(xiàn)垂直居中*/display: flex;display: -webkit-flex;flex-direction:column;justify-content:center;}

這里有個技巧就是可以定義的排列順序.left{order:1}，達(dá)到左側(cè)圖片居右的效果

2、宮格布局

<!--宮格布局--><div class="container2"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div></div> .container2{display: flex;display: -webkit-flex;flex-direction: row;/*決定主軸的方向*/flex-wrap:wrap;}.item{height: 100px;flex: 0 1 50%;background-color: lightcoral;color: white;font-size: 20px;text-align: center;line-height: 100px;border: 1px solid white;box-sizing: border-box;}

現(xiàn)在只是簡單的寫了個demo,認(rèn)識和理解都還不深刻。隨著今后在工作中的頻繁使用，相信會有更多的發(fā)現(xiàn)和驚喜。

?

轉(zhuǎn)載于:https://www.cnblogs.com/qq9694526/p/5713698.html

總結(jié)

以上是生活随笔為你收集整理的彻底弄懂css3的flex弹性盒模型的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。