Flex常見佈局例項

Alan丶發表於2019-03-27

如果對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;
  }
}
複製程式碼

這裡面需要注意的點有

  • containerflex-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使得子元素水平排列,並且換行

圖片描述

總結

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

相關文章