Css3中flex屬性怎么用

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

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

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

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

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

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

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

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

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

交叉軸的起點對齊| 結尾對齊 |中點對齊|第一行文字的基線對齊|未設置高度或設為auto占滿整個容器的高度

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

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

項目的6個屬性：

order ： 定義項目的排列順序。數值越小，排列越靠前，默認為0。

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

flex-shrink ：定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。

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

它可以設為跟width或height屬性一樣的值（比如350px），則項目將占據固定空間。

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

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

感謝你能夠認真閱讀完這篇文章，希望小編分享的“Css3中flex屬性怎么用”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!