Css3中flex屬性怎么用

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

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

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

flex-flow： flex-flow: <flex-direction> || <flex-wrap>;

justify-content：主軸上的對(duì)齊方式。

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

左對(duì)齊 | 右對(duì)齊 | 中間 | 兩端對(duì)齊 | 間隔對(duì)等

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

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

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

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

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

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

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ù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來(lái)大小。

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

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

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

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