這篇文章主要介紹了Css3中flex屬性怎么用，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)是專業(yè)的水富網(wǎng)站建設(shè)公司，水富接單;提供成都網(wǎng)站建設(shè)、做網(wǎng)站,網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行水富網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

flex-direction：row | row-reverse | column | column-reverse;橫排|反向橫排|豎排|反向豎排

flex-wrap： nowrap | wrap | wrap-reverse;不換行|換行|換行，第一行在下方

flex-flow： flex-flow: || ;

justify-content：主軸上的對齊方式。

flex-start | flex-end | center | space-between | space-around;

左對齊 |右對齊 |中間 |兩端對齊 |間隔對等

align-items： 屬性定義項(xiàng)目在交叉軸上如何對齊。

flex-start | flex-end | center | baseline | stretch

交叉軸的起點(diǎn)對齊|結(jié)尾對齊 |中點(diǎn)對齊|第一行文字的基線對齊|未設(shè)置高度或設(shè)為auto占滿整個容器的高度

align-content： 多根軸線的對齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用

flex-start | flex-end | center | space-between | space-around | stretch;

項(xiàng)目的6個屬性：

order： 定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。

flex-grow： 屬性定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大 1等分

flex-shrink：定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。

flex-basis： 屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來大小。

它可以設(shè)為跟width或height屬性一樣的值（比如350px），則項(xiàng)目將占據(jù)固定空間。

flex： 屬性是flex-grow, flex-shrink和 flex-basis的簡寫，默認(rèn)值為0 1 auto

align-self： self屬性允許單個項(xiàng)目有與其他項(xiàng)目不一樣的對齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Css3中flex屬性怎么用”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!