2. 程式人生 > >轉：阮一峰Flex 布局教程：實例篇

轉：阮一峰Flex 布局教程：實例篇

阿新 • • 發佈：2017-05-17
side web figure title borde 無法 ref .com 1.2

作者： 阮一峰

日期： 2015年7月14日

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

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

技術分享

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

一、骰子的布局

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

技術分享

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

技術分享

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


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

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

1.1 單項目

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

技術分享


.box {
  display: flex;
}

設置項目的對齊方式，就能實現居中對齊和右對齊。

技術分享


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

技術分享


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

設置交叉軸對齊方式，可以垂直移動主軸。

技術分享


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

技術分享


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

技術分享


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

技術分享


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

1.2 雙項目

技術分享


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

技術分享


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

技術分享


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

技術分享


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

技術分享


.box {
  display: flex;
}

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

技術分享


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

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

1.3 三項目

技術分享


.box {
  display: flex;
}

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

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

1.4 四項目

技術分享


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

技術分享

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.5 六項目

技術分享


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

技術分享


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

技術分享

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.6 九項目

技術分享


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

二、網格布局

2.1 基本網格布局

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

技術分享

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 百分比布局

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

技術分享

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）。其中軀幹又水平分成三欄，從左到右為：導航、主欄、副欄。

技術分享

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;
  }
}

四、輸入框的布局

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

技術分享

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;
}

五、懸掛式布局

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

技術分享

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布局，讓底欄總是出現在頁面的底部。

技術分享

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;
}

七，流式布局

每行的項目數固定，會自動分行。

技術分享

CSS的寫法。


.parent {
  width: 200px;
  height: 150px;
  background-color: black;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}

.child {
  box-sizing: border-box;
  background-color: white;
  flex: 0 0 25%;
  height: 50px;
  border: 1px solid red;
}

（完）

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

轉：阮一峰Flex 布局教程：實例篇

相關推薦

轉：阮一峰Flex 布局教程：實例篇

side web figure title borde 無法 ref .com 1.2 作者： 阮一峰 日期： 2015年7月14日 上一篇文章介紹了Flex布局的語法，今天介紹常見布局的Flex寫法。 你會看到，不管是什麽布局，Flex往往都可以幾行命令搞定。 我只列

Flex 布局教程：語法篇 作者： 阮一峰

num 完全 tutorials eight 項目 default size webkit http 網頁布局（layout）是 CSS 的一個重點應用。 布局的傳統解決方案，基於盒狀模型，依賴 display 屬性 + position屬性 + float屬性。它對於那

Flex 布局教程：語法篇

https stat token flow tutorial ble 布局 fault contain 作者： 阮一峰 日期： 2015年7月10日 網頁布局（layout）是 CSS 的一個重點應用。 布局的傳統解決方案，基於盒狀模型，依賴 display 屬性

Flex 布局教程：實例篇

nth idt between .org sch align opp cti dem 今天介紹常見布局的Flex寫法。 你會看到，不管是什麽布局，Flex往往都可以幾行命令搞定。 我只列出代碼，詳細的語法解釋請查閱《Flex布局教程：語法篇》。我的主要參考資料是La

Flex 布局教程：語法篇(摘抄，學習中)

有關 之前 表示 技術 play under line -c 內容 網頁布局（layout）是CSS的一個重點應用。 布局的傳統解決方案，基於盒狀模型，依賴 display屬性 + position屬性 + float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不

48.HTML---Flex 布局教程：實例篇

按鈕 nav 技術分享 and asset itl back href red 你會看到，不管是什麽布局，Flex往往都可以幾行命令搞定。 我只列出代碼，詳細的語法解釋請查閱《Flex布局教程：語法篇》。我的主要參考資料是Landon Schropp的文章和Solved

Flex 佈局教程：語法篇 作者： 阮一峰 日期： 2015年7月10日 網頁佈局（layout）是 CSS 的一個重點應用。 佈局的傳統解決方案，基於盒狀模型，依賴 display 屬性 + po

網頁佈局（layout）是 CSS 的一個重點應用。 佈局的傳統解決方案，基於盒狀模型，依賴 display 屬性 + position屬性 + float屬性。它對於那些特殊佈局非常不方便，比如，垂直居中就不容易實現。 2009年，W3C 提出了一種新的方案----Flex 佈局，可以簡

HTML/CSS：display:flex 布局教程

完全 安全 縮小 默認值 start column space https flex 網頁布局（layout）是 CSS 的一個重點應用。 布局的傳統解決方案，基於盒狀模型，依賴 display 屬性 + position屬性 + float屬性。它對於那些特殊布局非常不

組合語言初步瞭解-----轉自阮一峰的組合語言網路日誌

轉自http://www.ruanyifeng.com/blog/2018/01/assembly-language-primer.html 作者：阮一峰 學習程式設計其實就是學高階語言，即那些為人類設計的計算機語言。 但是，計算機不理解高階語言，必須通過編譯器轉成二進位制程式碼，才能執

JavaScript 的 this 原理 轉自阮一峰

一、問題的由來 學懂 JavaScript 語言，一個標誌就是理解下面兩種寫法，可能有不一樣的結果。 var obj = { foo: function () {} }; var foo = obj.foo; // 寫法一 obj.foo() // 寫法

網際網路協議入門（二） 作者：阮一峰

上一篇文章分析了網際網路的總體構思，從下至上，每一層協議的設計思想。這是從設計者的 角度但問題，今天我想切換到使用者的角度，看看使用者時如何從上至下，與這些協議互動的。 （接上文） 一個小結 先對前面的內容，做一個小結。 我們已經知道，網路通訊就是交

MVC、MVP、MVVM-作者： 阮一峰

MVC（Model-View-Controller）是最常見的軟體架構之一，業界有著廣泛應用。它本身很容易理解，但是要講清楚，它與衍生的 MVP 和 MVVM 架構的區別就不容易了。 （題圖：攝於瓦倫西亞，西班牙，2014年8月） 一、MVC MVC模式的意思是，軟體可

【轉自阮一峰老師】React Router中IndexRoute元件的用法

IndexRoute 元件 下面的例子，你會不會覺得有一點問題？ <Router> <Route path="/" component={App}> <Route path="accounts" component={Accou

KMP模式匹配演算法（轉自阮一峰）

字串匹配是計算機的基本任務之一。 舉例來說，有一個字串"BBC ABCDAB ABCDABCDABDE"，我想知道，裡面是否包含另一個字串"ABCDABD"？ 許多演算法可以完成這個任務，Knuth-Morris-Pratt演算法（簡稱KMP）是最常用的之一。它以三個發明者命名，起頭的那個K就是著

flex 布局教程

彈性 baseline tar ria https 活性 pac -c title 網頁布局（layout）是 CSS 的一個重點應用。 布局的傳統解決方案，基於盒狀模型，依賴 display 屬性 + position屬性 + float屬性。它對於那些特殊布局非常不方

display:flex 布局教程

圖片 4.4 開始 指定 pan ocl 決定 單獨 基本 布局的傳統解決方案，基於盒狀模型，依賴 display屬性 + position屬性 + float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。 一、Flex布局是什麽？ Flex是Flex

Flex布局（引用阮一峰大神）

title set -c itl asset 遊戲 www 一個 sset Flex 布局教程：語法篇 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex 布局教程：實例篇 http://www.rua

flex布局 （引用阮一峰老師的flex布局-語法篇）

元素 3.2 spa lin ear ner ros 剩余空間 對齊方式 一、Flex 布局是什麽？ Flex 是 Flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。 任何一個容器都可以指定為 Flex 布局。 .box{ disp

阮一峰：為什麽要寫博客（轉）

today html footer pac 訪問 2018年 網站流量 ip訪問 組態 2010年4月，我與百姓網CEO王建碩有過一次對話。我們談到了為什麽寫博客。 ? 阮：建碩，我知道你有兩個博客，一個是英文的，另一個是中文的。但是，你更新英文博客的頻率，遠遠高於

阮一峰：網頁效能管理詳解（轉）

你遇到過效能很差的網頁嗎？ 　　這種網頁響應非常緩慢，佔用大量的 CPU 和記憶體，瀏覽起來常常有卡頓，頁面的動畫效果也不流暢。 　　你會有什麼反應？我猜想，大多數使用者會關閉這個頁面，改為訪問其他網站。作為一個開發者，肯定不願意看到這種情況，怎樣才能提高效能呢？ 　　本文將詳細介紹效能問題的出現原