這篇文章主要介紹css中的flex屬性怎么用，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)基于分布式IDC數(shù)據(jù)中心構(gòu)建的平臺(tái)為眾多戶提供眉山服務(wù)器托管 四川大帶寬租用 成都機(jī)柜租用 成都服務(wù)器租用。

flex

flex 屬性用于指定彈性子元素如何分配空間。

語法

flex: auto | initial | none | inherit |  [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

各個(gè)值解析:

auto: 計(jì)算值為 1 1 auto

initial: 計(jì)算值為 0 1 auto

none：計(jì)算值為 0 0 auto

inherit：從父元素繼承

[ flex-grow ]：定義彈性盒子元素的擴(kuò)展比率。

[ flex-shrink ]：定義彈性盒子元素的收縮比率。

[ flex-basis ]：定義彈性盒子元素的默認(rèn)基準(zhǔn)值。

以下實(shí)例中，第一個(gè)彈性子元素占用了 2/4 的空間，其他兩個(gè)各占 1/4 的空間:

實(shí)例

.flex-item {

background-color: cornflowerblue;

margin: 10px;

}

.item1 {

-webkit-flex: 2;

flex: 2;

}

.item2 {

-webkit-flex: 1;

flex: 1;

}

.item3 {

-webkit-flex: 1;

flex: 1;

}

以上是“css中的flex屬性怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！