介紹flex的用法和屬性

本文介紹下flex的用法與屬性

這個一個自適應的3列盒子

#

<div class="flex">
  <div style="background-color:red;">红色</div>
  <div style="background-color:blue;">蓝色</div>  
  <div style="background-color:green;">绿色</div></div><style>.flex{ display: flex;}.flex div{border: 1px solid #000; flex:auto; height: 100px;}</style>

# 

##紅色

藍色

綠色

 

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

flex主要帶3個屬性值

分別是

flex-grow   規定項目將相對於其他靈活的項目進行擴展的量。

紅色

藍色

綠色

# 

<div class="flex1">
  <div style="background-color:red;">红色</div>
  <div style="background-color:blue;">蓝色</div>  
  <div style="background-color:green;">绿色</div></div><style>.flex1{ display: flex; width:400px;}.flex1 div{border: 1px solid #000; flex:auto; height: 200px;}.flex1 div:nth-child(1){-webkit-flex:1 0 100px;flex:1 0 100px;}.flex1 div:nth-child(2){-webkit-flex:2 0 100px;flex:2 0 100px;}.flex1 div:nth-child(3){-webkit-flex:3 0 100px;flex:3 0 100px;}</style>

如上面的例子，當父容器的寬度

大於子元素的寬度和的時候觸發

因為設定了

flex-basis為100px

flex的寬度為

400px，裡面的3個dom的總長度設定為300px；那麼多了100的剩餘寬度。

第一個子元素的擴展量：(1/(1+2+3))*100，即約等於16px;

第二個子元素的擴展量：(2/(1+2+3))*100，即約等於32px;

第三個子元素的擴展量：(3/(1+2+3))*100，約等於48px；

 

 

 分別是

flex-shrink #規定項目將相對於其他彈性的項目進行收縮的量。

紅色

藍色

綠色

# 

<div class="flex2">
  <div style="background-color:red;">红色</div>
  <div style="background-color:blue;">蓝色</div>  
  <div style="background-color:green;">绿色</div></div><style>.flex2{ display: flex; width:400px;}.flex2 div{border: 1px solid #000; flex:auto; height: 100px;}.flex2 div:nth-child(1){-webkit-flex:0 1 200px;flex:0 1 200px;}.flex2 div:nth-child(2){-webkit-flex:0 2 200px;flex:0 2 200px;}.flex2 div:nth-child(3){-webkit-flex:0 3 200px;flex:0 3 200px;}</style>

如上面的例子，當父容器的寬度小於子元素的寬度和的時候觸發

#因為設定了flex-basis為200px

flex的寬度為400px，裡面的3個dom的總長度設定為600px；那麼少了200px的剩餘寬度。

因為設定過縮的量所以需要200*1+200*2+#200*3=1200;

#所以第1個子容器的寬度為200-（200*1/1200）*200=166px

#所以第2個子容器的寬度為200-（200*2/1200）*200=134px

#所以第3個子容器的寬度為200-（200*3/1200）*200=100px

 

 

 

當「flex-basis」在「flex」屬性中不為0時（包含值為auto，此時伸縮基準值等於自身內容寬度），「flex子項」將分配容器的剩餘空間（剩餘空間即等於容器寬度減去各項的伸縮基準值）

• 當「flex -basis」在「flex」屬性中等於0時，「flex子項」將分配容器的所有空間（因為各項的伸縮基準值相加等於0，剩餘空間等於容器寬度減去各項的伸縮基準值，即減0，最後剩餘空間值等於容器寬度），所以可以藉助此特性，給各子項定義「flex: n」來進行按比例均分容器總寬度 

 
淺綠色
• = 支援

紅色

= 不支援粉紅色ValuesIEFirefoxChromeSafariOperaiOS SafariAndroid Chrome2.0-21.04.0-20.06.015.0+-webkit-6.0-6.1#2.1-4.322.0+21.0+# 6.1+7.0+-webkit-4.4+ 20.0+29.0+

	= 部分支援
Android Browser				Basic Support	6.0-10.0
			18.0-19.0	11.0+		-webkit-	-webkit-	17.0+
						-webkit-

9.0+

#9.0+

#28.0+# ################# #########

以上是介紹flex的用法和屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！