flex一欄寬度固定一欄寬度自適應佈局

admin發表於2018-08-31
Flex

關於flex彈性佈局可以參閱display:flex彈性佈局一章節。

本章節分享一段程式碼例項，它實現了一欄寬度固定，一欄寬度自適應效果。

面就介紹一下如何使用flex彈性佈局方式實現類似功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style>
.demo{
  display:flex;
}
 
.demo .left{
  width:100px;
  min-width:100px;
  max-width:100px;
  height:auto;
  background:#B4D3F7;
  flex-grow:0;
}
 
.demo .right{
  margin-left:10px;
  width:auto;
  height:200px;
  background:#F7E8B4;
  flex-grow:1;
}
</style>
</head>
<body>
<div class="demo">
  <div class="left"></div>
  <div class="right"></div>
</div>
</body>
</html>

上面程式碼實現了左側寬度固定，右側寬度自適應，下面做一下簡單分析。 

[CSS] 純文字檢視 複製程式碼
.demo{
  display:flex;
}

要使用彈性佈局，自然要在某個父元素上施加上述類似樣式。 

[CSS] 純文字檢視 複製程式碼
flex-grow:0

flex-grow屬性用來規定子專案如何利用剩餘的空間。

相關閱讀:

（1）.flex-grow參閱CSS3 flex-grow一章節。

（2）.min-width參閱CSS 元素尺寸一章節。

相關文章