CSS flex

admin發表於2019-04-10
CSSFlex

CSS3 彈性佈局總體介紹可以參閱display:flex 彈性佈局一章節。

此屬性是flex-grow、flex-shrink和flex-basis屬性的複合寫法。

預設屬性值為0 1 auto。

如果元素不是Flex專案，則此屬性不起作用。

語法結構：

[CSS] 純文字檢視 複製程式碼
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

屬性值說明：

（1）.auto:與1 1 auto相同。

（2）.none:與0 0 auto相同。

（1）.initial：Flex專案預設方式顯示，可以參閱CSS initial 屬性一章節。

（2）.inherit:從父元素繼承該屬性。

瀏覽器相容：

（1）.IE10+瀏覽器支援此屬性。

（2）.edge瀏覽器支援此屬性。

（3）.火狐瀏覽器支援此屬性。

（4）.谷歌瀏覽器支援此屬性。

（5）.Opera瀏覽器支援此屬性。

（6）.safria瀏覽器不支援此屬性。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style> 
#main{
  width:220px;
  height:300px;
  border:1px solid black;
  display:flex;
}
  
#main div{
  width:60px;
}
#main div:nth-of-type(2) {
  flex:2;
}
</style>
</head>
<body>
  
<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>  
  <div style="background-color:green;"></div>
</div>
</body>
</html>

上述程式碼簡單演示了flex屬性的用法，非常簡單。

相關文章