這篇文章主要介紹“css樣式中flex屬性怎么用”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“css樣式中flex屬性怎么用”文章能幫助大家解決問題。

成都創(chuàng)新互聯(lián)公司主營(yíng)四川網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,app軟件開發(fā),四川h5小程序開發(fā)搭建,四川網(wǎng)站營(yíng)銷推廣歡迎四川等地區(qū)企業(yè)咨詢

在css中，flex屬性用于設(shè)置或者檢索彈性盒模型對(duì)象的子元素如何分配空間；該屬性是“flex-grow”、“flex-shrink”和“flex-basis”屬性的簡(jiǎn)寫屬性，語(yǔ)法為“flex:簡(jiǎn)寫屬性值;”。

本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版本、Dell G3電腦。

css樣式中flex屬性的用法是什么

flex 屬性用于設(shè)置或檢索彈性盒模型對(duì)象的子元素如何分配空間。

flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡(jiǎn)寫屬性。

注意：如果元素不是彈性盒模型對(duì)象的子元素，則 flex 屬性不起作用。

語(yǔ)法如下：

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

屬性值如下：

• flex-grow 一個(gè)數(shù)字，規(guī)定項(xiàng)目將相對(duì)于其他靈活的項(xiàng)目進(jìn)行擴(kuò)展的量。

• flex-shrink 一個(gè)數(shù)字，規(guī)定項(xiàng)目將相對(duì)于其他靈活的項(xiàng)目進(jìn)行收縮的量。

• flex-basis 項(xiàng)目的長(zhǎng)度。合法值："auto"、"inherit" 或一個(gè)后跟 "%"、"px"、"em" 或任何其他長(zhǎng)度單位的數(shù)字。

• auto 與 1 1 auto 相同。

• none 與 0 0 auto 相同。

• initial 設(shè)置該屬性為它的默認(rèn)值，即為 0 1 auto。

• inherit 從父元素繼承該屬性。

示例如下：

 





  紅色