Flex常見佈局實例

如果對flex不是很熟悉的同學，可以看一下我的另一篇文章Flex 佈局

1、網格佈局

1.1、基本網格佈局

最簡單的網格佈局，就是平均分佈。
HTML代碼如下。

<div class="Grid">
    <div class="Grid-cell">1/2</div>
    <div class="Grid-cell">1/2</div>
  </div>
  <div class="Grid">
    <div class="Grid-cell">1/3</div>
    <div class="Grid-cell">1/3</div>
    <div class="Grid-cell">1/3</div>
  </div>

CSS代碼如下。

.Grid {
  display: flex;
}

.Grid-cell {
  flex: 1;
  background: #eee;
  margin: 10px;
}

這裏最關鍵的就是flex:1使得各個子元素可以等比伸縮

1.2、百分比佈局

某個網格的寬度爲固定的百分比，其餘網格平均分配剩餘的空間。
HTML代碼如下。

<div class="Grid">
    <div class="Grid-cell col2">50%</div>
    <div class="Grid-cell">auto</div>
    <div class="Grid-cell ">auto</div>
</div>
<div class="Grid">
    <div class="Grid-cell">auto</div>
    <div class="Grid-cell col2">50%</div>
    <div class="Grid-cell clo3">1/3</div>
</div>

CSS代碼如下。

.col2 {
  flex: 0 0 50%;
}
.col3 {
  flex: 0 0 33.3%;
}

這裏最關鍵的是通過flex的第三個屬性，也就是flex-basis來定義元素佔據的空間。

2、聖盃佈局

聖盃佈局（Holy Grail Layout：）指的是一種最常見的網站佈局。頁面從上到下，分成三個部分：頭部（header），軀幹（body），尾部（footer）。其中軀幹又水平分成三欄，從左到右爲：導航、主欄、副欄。
HTML代碼如下。

<div class="container">
    <header class="bg">header</header>
    <div class="body">
      <main class="content bg">content</main>
      <nav class="nav bg">nav</nav>
      <aside class="ads bg">aside</aside>
    </div>
    <footer class="bg">footer</footer>
  </div>

CSS代碼如下。

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.body {
  display: flex;
  flex: 1;
}

header,
footer {
  flex: 0 0 100px;
}
.content {
  flex: 1;
}

.ads,
.nav {
  flex: 0 0 100px;
}

.nav {
  order: -1;
}

.bg {
  background: #eee;
  margin: 10px;
}

@media (max-width: 768px) {
  .body {
    flex-direction: column;
    flex: 1;
  }

  .nav,
  .ads,
  .content {
    flex: auto;
  }
}

這裏面需要注意的點有

• container的flex-direction: column這樣保證了header,body,footer是在垂直軸上排列
• header,footer的高度可以通過flex: 0 0 100px來控制
• nav可以通過order:-1來調整位置
• 通過@media (max-width: 768px)來調整小屏幕的頁面結構

3、側邊固定寬度

側邊固定寬度，右邊自適應
html代碼如下。

<div class="container1">
    <div class="aside1 bg">aside</div>
    <div class="body1">
      <div class="header1 bg">header</div>
      <div class="content1 bg">content</div>
      <div class="footer1 bg">footer</div>
    </div>
</div>

CSS代碼如下。

.bg {
  background: #eee;
  margin: 10px;
}
.container1 {
  min-height: 100vh;
  display: flex;
}
.aside1 {
  /* flex: 0 0 200px; */
  flex: 0 0 20%;
}
.body1 {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.content1 {
  flex: 1;
}
.header1, .footer1 {
  flex: 0 0 10%;
}

這個和上面的基本差不多就不做解釋了。

4、流式佈局

每行的項目數固定，會自動分行。
html代碼如下

<div class="container2">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

css代碼如下

.container2 {
  width: 200px;
  height: 150px;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}

.item {
  box-sizing: border-box;
  background: #eee;
  flex: 0 0 20%;
  height: 40px;
  margin: 5px;
}

這裏主要使用到了flex-flow: row wrap使得子元素水平排列，並且換行

總結

這是我簡單總結的一些佈局。如有錯誤，歡迎指正。