flex三列布局中間寬度自適應佈局

admin發表於2017-10-19
Flex

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

分享一個程式碼例項，它實現了三列布局，左右兩列寬度固定，中間寬度自適應。

程式碼例項:

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

上面程式碼實現了我們的要求，下面對它進行一下簡單介紹。

一.實現過程:

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

要實現flex彈性佈局，那麼必然某一個父元素要應用display: flex。

[CSS] 純文字檢視 複製程式碼
.left{
  width: 300px;
  height:400px;
  background: #B4D3F7;
}

左欄採用固定尺寸，右欄也是如此。

[CSS] 純文字檢視 複製程式碼
.middle{
  flex-grow:1;
  background: #F7E8B4;
}

之所以能夠實現尺寸自適應，關鍵是應用了flex-grow屬性。

具體參閱CSS3 flex-grow一章節。

相關文章