Flex 布局實例教程

6d6d 9年前發布 | 21K 次閱讀 Flex 前端技術

原文  http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

上一篇文章介紹了Flex布局的語法，今天介紹常見布局的Flex寫法。


你會看到，不管是什么布局，Flex往往都可以幾行命令搞定。

Flex 布局實例教程

我只列出代碼，詳細的語法解釋請查閱《Flex布局語法教程》。我的主要參考資料是 Landon Schropp 的文章和 Solved by Flexbox 。

一、骰子的布局

骰子的一面，最多可以放置9個點。

Flex 布局實例教程

下面，就來看看Flex如何實現，從1個點到9個點的布局。你可以到 codepen 查看Demo。

Flex 布局實例教程

如果不加說明，本節的HTML模板一律如下。 

<div class="box">
  <span class="item"></span>
</div>

上面代碼中，div元素（代表骰子的一個面）是Flex容器，span元素（代表一個點）是Flex項目。如果有多個項目，就要添加多個span元素，以此類推。

1.1 單項目：首行左對齊

首先，只有左上角1個點的情況。Flex布局默認就是首行左對齊，所以一行代碼就夠了。

Flex 布局實例教程 

.box {
  display: flex;
}

1.2 單項目：首行居中對齊

Flex 布局實例教程 

.box {
  display: flex;
  justify-content: center;
}

1.3 單項目：首行右對齊

Flex 布局實例教程 

.box {
  display: flex;
  justify-content: flex-end;
}

1.4 單項目：中行左對齊

Flex 布局實例教程 

.box {
  display: flex;
  align-items: center;
}

1.5 單項目：垂直居中對齊

Flex 布局實例教程 

.box {
  display: flex;
  justify-content: center;
  align-items: center;
}

1.6 單項目：尾行居中對齊

Flex 布局實例教程 

.box {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

1.7 單項目：尾行右對齊

Flex 布局實例教程 

.box {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

1.8 雙項目：首行兩端對齊

Flex 布局實例教程 

.box {
  display: flex;
  justify-content: space-between;
}

1.9 雙項目：首列兩端對齊

Flex 布局實例教程 

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

1.10 雙項目：中列兩端對齊

Flex 布局實例教程 

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

1.11 雙項目：尾列兩端對齊

Flex 布局實例教程 

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}

1.12 雙項目：首行左對齊，中行居中對齊

Flex 布局實例教程 

.box {
  display: flex;
}

.item:nth-child(2) {
  align-self: center;
}

1.13 雙項目：首行左對齊，尾行右對齊

Flex 布局實例教程 

.box {
  display: flex;
  justify-content: space-between;
}

.item:nth-child(2) {
  align-self: flex-end;
}

1.14 三項目：對角線布局

Flex 布局實例教程 

.box {
  display: flex;
}

.item:nth-child(2) {
  align-self: center;
}

.item:nth-child(3) {
  align-self: flex-end;
}

1.15 四項目：首行排滿，尾行右對齊

Flex 布局實例教程 

.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: space-between;
}

1.16 四項目：四角對齊

Flex 布局實例教程

HTML代碼如下。 

<div class="box">
  <div class="column">
    <span class="item"></span>
    <span class="item"></span>
  </div>
  <div class="column">
    <span class="item"></span>
    <span class="item"></span>
  </div>
</div>

CSS代碼如下。 

.box {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

.column {
  flex-basis: 100%;
  display: flex;
  justify-content: space-between;
}

1.17 六項目：首行排滿，尾行排滿

Flex 布局實例教程 

.box {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

1.18 六項目：首列排滿，尾列排滿

Flex 布局實例教程 

.box {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: space-between;
}

1.19 六項目：首行兩端對齊，中行居中，尾行排滿

Flex 布局實例教程

HTML代碼如下。 

<div class="box">
  <div class="row">
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
  </div>
  <div class="row">
    <span class="item"></span>
  </div>
  <div class="row">
     <span class="item"></span>
     <span class="item"></span>
  </div>
</div>

CSS代碼如下。 

.box {
  display: flex;
  flex-wrap: wrap;
}

.row{
  flex-basis: 100%;
  display:flex;
}

.row:nth-child(2){
  justify-content: center;
}

.row:nth-child(3){
  justify-content: space-between;
}

1.20 九項目

Flex 布局實例教程 

.box {
  display: flex;
  flex-wrap: wrap;
}

二、網格布局

2.1 基本網格布局

最簡單的網格布局，就是平均分布。在容器里面平均分配空間，跟上面的骰子布局很像，但是需要設置項目的自動縮放。

Flex 布局實例教程

HTML代碼如下。 

<div class="Grid">
  <div class="Grid-cell">...</div>
  <div class="Grid-cell">...</div>
  <div class="Grid-cell">...</div>
</div>

CSS代碼如下。 

.Grid {
  display: flex;
}

.Grid-cell {
  flex: 1;
}

2.2 百分比布局

某個網格的寬度為固定的百分比，其余網格平均分配剩余的空間。

Flex 布局實例教程

HTML代碼如下。 

<div class="Grid">
  <div class="Grid-cell u-1of4">...</div>
  <div class="Grid-cell">...</div>
  <div class="Grid-cell u-1of3">...</div>
</div>
.Grid {
  display: flex;
}

.Grid-cell {
  flex: 1;
}

.Grid-cell.u-full {
  flex: 0 0 100%;
}

.Grid-cell.u-1of2 {
  flex: 0 0 50%;
}

.Grid-cell.u-1of3 {
  flex: 0 0 33.3333%;
}

.Grid-cell.u-1of4 {
  flex: 0 0 25%;
}

三、圣杯布局

圣杯布局 （Holy Grail Layout）指的是一種最常見的網站布局。頁面從上到下，分成三個部分：頭部（header），軀干（body），尾部（footer）。其中軀干又水平分成三欄，從左到右為：導航、主欄、副欄。

Flex 布局實例教程

HTML代碼如下。 

<body class="HolyGrail">
  <header>...</header>
  <div class="HolyGrail-body">
    <main class="HolyGrail-content">...</main>
    <nav class="HolyGrail-nav">...</nav>
    <aside class="HolyGrail-ads">...</aside>
  </div>
  <footer>...</footer>
</body>

CSS代碼如下。 

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

header,
footer {
  flex: 1;
}

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

.HolyGrail-content {
  flex: 1;
}

.HolyGrail-nav, .HolyGrail-ads {
  /* 兩個邊欄的寬度設為12em */
  flex: 0 0 12em;
}

.HolyGrail-nav {
  /* 導航放到最左邊 */
  order: -1;
}

如果是小屏幕，軀干的三欄自動變為垂直疊加。 

@media (max-width: 768px) {
  .HolyGrail-body {
    flex-direction: column;
    flex: 1;
  }
  .HolyGrail-nav,
  .HolyGrail-ads,
  .HolyGrail-content {
    flex: auto;
  }
}

四、輸入框的布局

我們常常需要在輸入框的前方添加提示，后方添加按鈕。

Flex 布局實例教程

HTML代碼如下。 

<div class="InputAddOn">
  <span class="InputAddOn-item">...</span>
  <input class="InputAddOn-field">
  <button class="InputAddOn-item">...</button>
</div>

CSS代碼如下。 

.InputAddOn {
  display: flex;
}

.InputAddOn-field {
  flex: 1;
}

五、懸掛式布局

有時，主欄的左側或右側，需要添加一個圖片欄。

Flex 布局實例教程

HTML代碼如下。 

<div class="Media">
  <img class="Media-figure" src="" alt="">
  <p class="Media-body">...</p>
</div>

CSS代碼如下。 

.Media {
  display: flex;
  align-items: flex-start;
}

.Media-figure {
  margin-right: 1em;
}

.Media-body {
  flex: 1;
}

六、固定的底欄

有時，頁面內容太少，無法占滿一屏的高度，底欄就會抬高到頁面的中間。這時可以采用Flex布局，讓底欄總是出現在頁面的底部。

Flex 布局實例教程

HTML代碼如下。 

<body class="Site">
  <header>...</header>
  <main class="Site-content">...</main>
  <footer>...</footer>
</body>

CSS代碼如下。 

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

.Site-content {
  flex: 1;
}

（完）

 本文由用戶 6d6d 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！