[CSS佈局]簡單的CSS三列布局

前言

公司終於能夠上外網了，近期在搞RN的東西，暫時腦子有點暈，等過段時間再來寫點總結。卻是最近有個新學前端的同窗常常會問一些基礎知識，工做空閒寫了小Demo給他看，全是很基礎的知識，純粹是順便記錄在這裏就當溫故而知新吧...

CSS佈局

關於佈局，咱們立刻就要想到浮動和定位，根據要實現的佈局，至關於用浮動和定位等屬性進行拖拽便可。如今瀏覽器對ie等老版本瀏覽器的兼容需求愈來愈低，咱們還能夠採用css3的flexbox佈局來設計，這個現在已是必需要掌握的一個佈局方法了，尤爲是在移動端很是便捷，最近正火react-native正是引入了flexbox佈局，學會了這個，再去作app的開發佈局也會感受爽的停不下來。

言歸正傳，咱們來實現一個最簡單的三列布局，須要的效果以下：

兩邊是固定的側邊欄，中間是自適應寬度的主體內容。咱們有好幾種方法來實現。

絕對定位法

絕對定位感受是新手最喜歡用的方法，無論怎麼樣，就是一個定位疊着一個定位，什麼樣子均可以定位出來。

• html:

<div class="container">
  <div class="left">left</div>
  <div class="right">right</div>
  <div class="main">main</div>
</div>

• css:

.container {
  position: relative;
  width: 100%;
  height: 800px;
  background: #eee;
}

.left, 
.right {
  height: 600px;
  width: 100px;
  position: absolute;
  top: 0;
}

.left {
  left:0;
  background: burlywood;
}

.right {
  right: 0;
  background: coral;
}

.main {
  height: 800px;
  margin: 0 110px;
  background: chocolate;
}

浮動法

浮動法跟絕對定位法同樣，比較簡單，可是須要注意一點就是html中main部分要寫在最後。

• html:

<div class="container">
<div class="left">left</div>
  <div class="right">right</div>
<div class="main">main</div>

</div>

• css:

.container {
  height: 800px;
  background: #eee;
}

.left,
.right {
  height: 600px;
  width: 100px;
}
.left {
  float: left;
  background: burlywood
}
.right {
  float: right;
  background: coral
}
.main {
  height: 800px;
  margin: 0 110px;
  background:chocolate
}

margin負值法

margin負值法算是一個因吹絲停的方法，我其實不多用，可是公司的不少老項目中卻是用的很多，這個方法比較巧妙，在html中main部分須要嵌套一個div了，而且順序也是在第一位，而後浮動，後面left和right部分一樣浮動按照正常來講會換行了，全部給一個負值的margin，就巧妙的達到了想要的效果。

• html:

<div class="container">
  <div class="main">
    <div class="body">main</div>
  </div>
  <div class="left">left</div>
  <div class="right">right</div>


</div>

• css:

.container {
  height: 800px;
  background: #eee;
}

.main {
  float: left;
  width: 100%;
  height: 800px;
}

.main .body {
  height: 100%;
  margin: 0 110px;
  background: chocolate;
}

.left {
  float: left;
  margin-left: -100%;
  width: 100px;
  height: 600px;
  background: burlywood;
}

.right {
  float: left;
  margin-left: -100px;
  width: 100px;
  height: 600px;
  background: coral;
}

flexbox佈局法

flexbox佈局在這個場景中其實並非最合適的，由於兩邊側欄都是固定寬高,和主體部分也沒有等高。不過沒有關係，學會其基本用法纔是最主要的，記住flexbox分爲容器與子元素兩部分的樣式設置，容器的justify-content 和 align-items是兩個最重要的屬性，子元素的flex屬性，集成了flex-grow,flex-shrink,flex-basis三個屬性。具體的用法我前面也有一篇文章寫過。同時建議參考下CSS參考手冊，裏面關於flex屬性的兩個例子很是好。

• html：

<div class="container">
<div class="left">left</div>
  <div class="main">main</div>
<div class="right">right</div>


</div>

• css:

.container {
  display: flex;
  height: 800px;
  background: #eee;
}

.left {
  flex: 0 0 100px;
  height: 600px;
  background: burlywood;
}

.main {
  flex: 1 1 auto;
  margin: 0 10px;
  background: chocolate;
}

.right {
  flex: 0 0 100px;
  height: 600px;
  background: coral
}

總結

忽然寫點簡單的CSS知識感受神清氣爽，感受找到了剛學時候的新鮮感~不限網的感受不錯，之後繼續在博客園逛逛寫寫。