HTML 布局

頁布局對改善網(wǎng)站的外觀非常重要。

請慎重設計您的網(wǎng)頁布局。

在線實例

使用 <div> 元素的網(wǎng)頁布局

如何使用 <div> 元素添加布局。

使用 <table> 元素的網(wǎng)頁布局

如何使用 <table> 元素添加布局。

網(wǎng)站布局

大多數(shù)網(wǎng)站會把內(nèi)容安排到多個列中（就像雜志或報紙那樣）。

大多數(shù)網(wǎng)站可以使用 <div> 或者 <table> 元素來創(chuàng)建多列。CSS 用于對元素進行定位，或者為頁面創(chuàng)建背景以及色彩豐富的外觀。

	雖然我們可以使用HTML table標簽來設計出漂亮的布局，但是table標簽是不建議作為布局工具使用的 - 表格不是布局工具。

HTML 布局 - 使用<div> 元素

div 元素是用于分組 HTML 元素的塊級元素。

下面的例子使用五個 div 元素來創(chuàng)建多列布局：

實例

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鳥教程(runoob.com)</title></head><body><divid="container"style="width:500px"><divid="header"style="background-color:#FFA500;"><h1style="margin-bottom:0;">主要的網(wǎng)頁標題</h1></div><divid="menu"style="background-color:#FFD700;height:200px;width:100px;float:left;"><b>菜單</b><br>HTML<br>CSS<br>JavaScript</div><divid="content"style="background-color:#EEEEEE;height:200px;width:400px;float:left;">內(nèi)容在這里</div><divid="footer"style="background-color:#FFA500;clear:both;text-align:center;">版權 ? runoob.com</div></div></body></html>

上面的 HTML 代碼會產(chǎn)生如下結果：

HTML 布局 - 使用表格

使用 HTML <table> 標簽是創(chuàng)建布局的一種簡單的方式。

大多數(shù)站點可以使用 <div> 或者 <table> 元素來創(chuàng)建多列。CSS 用于對元素進行定位，或者為頁面創(chuàng)建背景以及色彩豐富的外觀。

	即使可以使用 HTML 表格來創(chuàng)建漂亮的布局，但設計表格的目的是呈現(xiàn)表格化數(shù)據(jù) - 表格不是布局工具！

下面的例子使用三行兩列的表格 - 第一和最后一行使用 colspan 屬性來橫跨兩列：

實例

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鳥教程(runoob.com)</title></head><body><tablewidth="500"border="0"><tr><tdcolspan="2"style="background-color:#FFA500;"><h1>主要的網(wǎng)頁標題</h1></td></tr><tr><tdstyle="background-color:#FFD700;width:100px;"><b>菜單</b><br>HTML<br>CSS<br>JavaScript</td><tdstyle="background-color:#eeeeee;height:200px;width:400px;">內(nèi)容在這里</td></tr><tr><tdcolspan="2"style="background-color:#FFA500;text-align:center;">版權 ? runoob.com</td></tr></table></body></html>

上面的 HTML 代碼會產(chǎn)生以下結果：

HTML 布局 - 有用的提示

Tip: 使用 CSS 最大的好處是，如果把 CSS 代碼存放到外部樣式表中，那么站點會更易于維護。通過編輯單一的文件，就可以改變所有頁面的布局。如需學習更多有關 CSS 的知識，請訪問我們的CSS 教程。

Tip: 由于創(chuàng)建高級的布局非常耗時，使用模板是一個快速的選項。通過搜索引擎可以找到很多免費的網(wǎng)站模板（您可以使用這些預先構建好的網(wǎng)站布局，并優(yōu)化它們）。

HTML 布局標簽

標簽	描述
<div>	定義文檔區(qū)塊，塊級(block-level)
<span>	定義 span，用來組合文檔中的行內(nèi)元素。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

家好，我是IT共享者，人稱皮皮。這篇我們來講講CSS網(wǎng)頁布局。

一、網(wǎng)頁布局

網(wǎng)頁布局有很多種方式，一般分為以下幾個部分：頭部區(qū)域、菜單導航區(qū)域、內(nèi)容區(qū)域、底部區(qū)域。

1. 頭部區(qū)域

頭部區(qū)域位于整個網(wǎng)頁的頂部，一般用于設置網(wǎng)頁的標題或者網(wǎng)頁的 logo：

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 項目(runoob.com)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
}


/* 頭部樣式 */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}
</style>
</head>
<body>


<div class="header">
  <h1>頭部區(qū)域</h1>
</div>


</body>
</html>

2. 菜單導航區(qū)域

菜單導航條包含了一些鏈接，可以引導用戶瀏覽其他頁面：

例

/* 導航條 */
.topnav {
  overflow: hidden;
  background-color: #333;
}
 
/* 導航鏈接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
/* 鏈接 - 修改顏色 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

3. 內(nèi)容區(qū)域

內(nèi)容區(qū)域一般有三種形式:

1 列：一般用于移動端。
2 列：一般用于平板設備。
3 列：一般用于 PC 桌面設備。

不相等的列

不相等的列一般是在中間部分設置內(nèi)容區(qū)域，這塊也是最大最主要的，左右兩次側可以作為一些導航等相關內(nèi)容，這三列加起來的寬度是 100％。

例：

.column {
  float: left;
}
 
/* 左右側欄的寬度 */
.column.side {
  width: 25%;
}
 
/* 中間列寬度 */
.column.middle {
  width: 50%;
}
 
/* 響應式布局 - 寬度小于600px時設置上下布局 */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

4. 底部區(qū)域

底部區(qū)域在網(wǎng)頁的最下方，一般包含版權信息和聯(lián)系方式等。

例

.footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}

二、響應式網(wǎng)頁布局

通過以上等學習我們來創(chuàng)建一個響應式等頁面，頁面的布局會根據(jù)屏幕的大小來調整：

案例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>項目</title>
<style>
* {
  box-sizing: border-box;
}
 
body {
  font-family: Arial;
  padding: 10px;
  background: #f1f1f1;
}
 
/* 頭部標題 */
.header {
  padding: 30px;
  text-align: center;
  background: white;
}
 
.header h1 {
  font-size: 50px;
}
 
/* 導航條 */
.topnav {
  overflow: hidden;
  background-color: #333;
}
 
/* 導航條鏈接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
/* 鏈接顏色修改 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
 
/* 創(chuàng)建兩列 */
/* Left column */
.leftcolumn {   
  float: left;
  width: 75%;
}
 
/* 右側欄 */
.rightcolumn {
  float: left;
  width: 25%;
  background-color: #f1f1f1;
  padding-left: 20px;
}
 
/* 圖像部分 */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}
 
/* 文章卡片效果 */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}
 
/* 列后面清除浮動 */
.row:after {
  content: "";
  display: table;
  clear: both;
}
 
/* 底部 */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}
 
/* 響應式布局 - 屏幕尺寸小于 800px 時，兩列布局改為上下布局 */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}
 
/* 響應式布局 -屏幕尺寸小于 400px 時，導航等布局改為上下布局 */
@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}
</style>
</head>
<body>


<div class="header">
  <h1>我的網(wǎng)頁</h1>
  <p>重置瀏覽器大小查看效果。</p>
</div>


<div class="topnav">
  <a href="#">鏈接</a>
  <a href="#">鏈接</a>
  <a href="#">鏈接</a>
  <a href="#" style="float:right">鏈接</a>
</div>


<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2>文章標題</h2>
      <h5>xx 年xx月 xx日</h5>
      <div class="fakeimg" style="height:200px;"><img src="img/bird.png"></div>
      <p>文本...</p>
      <p>當熱誠變成習慣，恐懼和憂慮即無處容身。缺乏熱誠的人也沒有明確的目標。熱誠使想象的輪子轉動。一個人缺乏熱誠就象汽車沒有汽油。
      善于安排玩樂和工作，兩者保持熱誠，就是最快樂的人。熱誠使平凡的話題變得生動。！</p>
    </div>
    <div class="card">
      <h2>文章標題</h2>
      <h5>xx 年 xx 月xx日</h5>
      <div class="fakeimg" style="height:200px;"><img src="img/border.png"></div>
      <p>文本...</p>
      <p>一切事無法追求完美，唯有追求盡力而為。這樣心無壓力，出來的結果反而會更好！</p>
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>關于我</h2>
      <div class="fakeimg" style="height:100px;"></div>
      <p>6666</p>
    </div>
    <div class="card">
      <h3>熱門文章</h3>
      <div class="fakeimg"><img src="img/fy2_wp.png">\</div>
    
    </div>
    <div class="card">
      <h3>關注我</h3>
      <p>本站發(fā)布的系統(tǒng)與軟件僅為個人學習測試使用，請在下載后24小時內(nèi)刪除，
      不得用于任何商業(yè)用途，否則后果自負，請支持購買正版軟件！如侵犯到您的權益,請及時通知我們,我們會及時處理。


聲明：為非贏利性網(wǎng)站 不接受任何贊助和廣告。</p>
    </div>
  </div>
</div>


<div class="footer">
  <h2>底部區(qū)域</h2>
</div>


</body>
</html>

三、總結

本文主要介紹了Html的網(wǎng)頁布局結構，如何去了解網(wǎng)絡的布局，介紹了常見的移動設備的三種網(wǎng)頁模式，最后通過一個小項目，總結之前講解的內(nèi)容。

代碼很簡單，希望可以幫助你學習。

們的 CSS flexbox 布局綜合指南。這份完整的指南解釋了有關 flexbox 的所有內(nèi)容，重點介紹了父元素（flex 容器）和子元素（flex 項）的所有不同可能屬性。它還包括歷史、演示、模式和瀏覽器支持圖表。

彈性布局的誕生背景

（Flexbox LayoutFlexible Box）模塊（截至 2017 年 10 月的 W3C 候選推薦）旨在提供一種更有效的方式來布局、對齊和分配容器中項目之間的空間，即使它們的大小未知和/或動態(tài)（因此詞“彎曲”）。

flex 布局背后的主要思想是讓容器能夠改變其項目的寬度/高度（和順序）以最好地填充可用空間（主要是為了適應各種顯示設備和屏幕尺寸）。彈性容器擴展項目以填充可用的可用空間或縮小它們以防止溢出。

最重要的是，與常規(guī)布局（基于垂直地塊和基于水平的內(nèi)聯(lián)）相比，flexbox 布局與方向無關。雖然這些適用于頁面，但它們?nèi)狈`活性（不是雙關語）來支持大型或復雜的應用程序（尤其是在涉及方向更改、調整大小、拉伸、收縮等方面）。

注意： Flexbox 布局最適合應用程序的組件和小規(guī)模布局，而Grid布局適用于更大規(guī)模的布局。

基礎知識和術語

由于 flexbox 是一個完整的模塊而不是單個屬性，它涉及到很多東西，包括它的整個屬性集。其中一些是要設置在容器上（父元素，稱為“flex container”），而其他是要設置在子級（稱為“flex items”）上。

如果“常規(guī)”布局基于塊流方向和內(nèi)聯(lián)流方向，則彈性布局基于“彈性流方向”。請看一下規(guī)范中的這張圖，解釋了 flex 布局背后的主要思想。

解釋 flexbox 術語的圖表。穿過flexbox主軸的尺寸稱為主尺寸，另一個方向是橫向尺寸。這些尺寸有一個主開始、主結束、交叉開始和交叉結束。

項目將按照main axis(from main-startto main-end) 或橫軸 (from cross-startto cross-end) 排列。

主軸——彈性容器的主軸是彈性項目沿其布置的主軸。請注意，它不一定是水平的；這取決于flex-direction屬性（見下文）。
主啟動 | main-end – 彈性項目放置在容器內(nèi)，從 main-start 開始到 main-end。
主尺寸——一個彈性項目的寬度或高度，無論是在主尺寸，還是項目的主要尺寸。彈性項目的主要尺寸屬性是“寬度”或“高度”屬性，以主要尺寸中的為準。
交叉軸——垂直于主軸的軸稱為交叉軸。它的方向取決于主軸的方向。
交叉啟動| cross-end – 彈性線填充了項目，并從彈性容器的交叉開始側開始放置到容器中，并朝向交叉端側。
cross size – 彈性項目的寬度或高度，以交叉維度為準，是項目的交叉大小。橫向尺寸屬性是橫向尺寸中的“寬度”或“高度”中的任何一個。

彈性盒屬性

父級（彈性容器）的屬性

展示

這定義了一個彈性容器；內(nèi)聯(lián)或塊取決于給定的值。它為其所有直接子級啟用了彈性上下文。

.container {
  display: flex; /* or inline-flex */
}

請注意，CSS 列對 flex 容器沒有影響。

彈性方向

這建立了主軸，從而定義了彈性項目放置在彈性容器中的方向。Flexbox 是（除了可選的包裝）一個單向布局的概念。將彈性項目視為主要以水平行或垂直列布局。

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

row（默認）：從左到右ltr；從右到左rtl
row-reverse：從右到左ltr；從左到右rtl
column: 相同，row但從上到下
column-reverse: 相同，row-reverse但從下到上

彈性包裝

默認情況下，彈性項目都將嘗試適合一行。您可以更改它并允許使用此屬性根據(jù)需要包裝項目。

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap（默認）：所有彈性項目都將在一行
wrap: flex 項目將從上到下包裹到多行。
wrap-reverse: flex 項目將從下到上換行成多行。

彈性流動

這是flex-directionandflex-wrap屬性的簡寫，它們共同定義了 flex 容器的主軸和交叉軸。默認值為row nowrap。

.container {
  flex-flow: column wrap;
}

證明內(nèi)容

這定義了沿主軸的對齊方式。當一行上的所有 flex 項目都不靈活，或者是靈活的但已達到最大大小時，它有助于分配額外的可用空間。當項目出行時，它還會對項目的對齊方式施加一些控制。

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

flex-start（默認）：項目被打包朝向 flex-direction 的開始。
flex-end: 項目被打包到 flex-direction 的末尾。
start: 物品被包裝在方向的開始處writing-mode。
end: 物品被包裝到方向的盡頭writing-mode。
left: 物品被包裝在容器的左邊緣，除非這對 . 沒有意義，否則flex-direction它的行為就像start.
right: 物品被包裝在容器的右邊緣，除非這對 . 沒有意義，否則flex-direction它的行為就像end.
center：項目沿線居中
space-between：物品均勻分布在行中；第一項在起始行，最后一項在結束行
space-around：項目均勻分布在行中，周圍空間相等。請注意，視覺上的空間是不相等的，因為所有項目的兩邊都有相等的空間。第一個項目將在容器邊緣有一個空間單位，但下一個項目之間有兩個空間單位，因為下一個項目有自己的適用間距。
space-evenly：項目分布使得任何兩個項目之間的間距（以及邊緣的空間）相等。

請注意，瀏覽器對這些值的支持是有細微差別的。例如，space-between某些版本的 Edge 從未獲得過支持，并且 Chrome 還沒有開始/結束/左/右。MDN有詳細的圖表。最安全的值是flex-start、flex-end和center。

還有兩個額外的關鍵字可以與這些值配對：safe和unsafe. 使用safe確保無論您如何進行這種類型的定位，您都不能推動一個元素，使其呈現(xiàn)在屏幕外（例如，離開頂部），這樣內(nèi)容也不能滾動（稱為“數(shù)據(jù)丟失”） .

對齊項目

這定義了彈性項目如何沿當前行的交叉軸布局的默認行為。將其視為justify-content橫軸（垂直于主軸）的版本。

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

stretch（默認）：拉伸以填充容器（仍然尊重最小寬度/最大寬度）
flex-start// start:self-start項目放置在橫軸的開始處。這些之間的區(qū)別是微妙的，是關于尊重flex-direction規(guī)則或writing-mode規(guī)則的。
flex-end// end:self-end項目放置在橫軸的末端。區(qū)別又是微妙的，是關于尊重flex-direction規(guī)則與writing-mode規(guī)則的。
center：項目在橫軸上居中
baseline：項目對齊，例如它們的基線對齊

和修飾符關鍵字可以與所有其他關鍵字一起使用（盡管注意safe瀏覽器支持），并幫助您防止對齊元素以使內(nèi)容變得不可訪問。unsafe

對齊內(nèi)容

當橫軸上有額外空間時，這將對齊 flex 容器的線，類似于在justify-content主軸內(nèi)對齊單個項目的方式。

注意：該屬性只對多行靈活容器生效，這里flex-wrap設置為wrap或wrap-reverse)。單行靈活容器（即 whereflex-wrap設置為其默認值no-wrap）不會反映align-content.

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

normal（默認）：項目被打包在它們的默認位置，就好像沒有設置值一樣。
flex-start/ start：包裝到容器開頭的物品。（更受支持的）flex-start尊重，flex-direction而start尊重writing-mode方向。
flex-end/ end：包裝到容器末端的物品。（更多支持）flex-end尊重，flex-direction而端尊重writing-mode方向。
center：在容器中居中的項目
space-between：項目均勻分布；第一行在容器的開頭，最后一行在結尾
space-around：項目在每行周圍均勻分布
space-evenly：項目均勻分布，周圍空間相等
stretch: 線條伸展以占用剩余空間

和修飾符關鍵字可以與所有其他關鍵字一起使用（盡管注意safe瀏覽器支持），并幫助您防止對齊元素以使內(nèi)容變得不可訪問。unsafe

間隙、行間隙、列間隙

該gap屬性明確控制彈性項目之間的空間。它僅在不在外邊緣的項目之間應用該間距。

.container {
  display: flex;
  ...
  gap: 10px;
  gap: 10px 20px; /* row-gap column gap */
  row-gap: 10px;
  column-gap: 20px;
}

該行為可以被認為是最小排水溝，就好像排水溝以某種方式更大（因為類似justify-content: space-between;），那么只有當該空間最終變得更小時，差距才會生效。

它不僅適用于 flexbox，也gap適用于網(wǎng)格和多列布局。

子項的屬性（彈性項目）

命令

默認情況下，彈性項目按源順序排列。但是，該order屬性控制它們在彈性容器中出現(xiàn)的順序。

.item {
  order: 5; /* default is 0 */
}

具有相同的項目order恢復到源訂單。

彈性成長

這定義了彈性項目在必要時增長的能力。它接受用作比例的無單位值。它規(guī)定了項目應該占用的彈性容器內(nèi)的可用空間量。

如果所有項目都flex-grow設置為1，則容器中的剩余空間將平均分配給所有子項。如果其中一個孩子的值為2，則該孩子將占用其他孩子之一的兩倍空間（或者至少會嘗試）。

.item {
  flex-grow: 4; /* default 0 */
}

負數(shù)無效。

彈性收縮

這定義了彈性項目在必要時收縮的能力。

.item {
  flex-shrink: 3; /* default 1 */
}

負數(shù)無效。

彈性基礎

這定義了在分配剩余空間之前元素的默認大小。它可以是長度（例如 20%、5rem 等）或關鍵字。關鍵字的auto意思是“看看我的寬度或高度屬性”（這是由main-size關鍵字臨時完成的，直到被棄用）。關鍵字的content意思是“根據(jù)項目的內(nèi)容調整大小”——這個關鍵字還沒有得到很好的支持，所以很難測試，也很難知道它的兄弟max-content、、min-content和fit-content做什么。

.item {
  flex-basis:  | auto; /* default auto */
}

如果設置為0，則不考慮內(nèi)容周圍的額外空間。如果設置為auto，則根據(jù)其flex-grow值分配額外空間。請參閱此圖。

柔性

這是flex-grow, flex-shrink和flex-basis組合的簡寫。第二個和第三個參數(shù) (flex-shrink和flex-basis) 是可選的。默認值為0 1 auto，但如果您使用單個數(shù)值設置它，例如flex: 5;，則會將更改flex-basis為 0%，所以它就像設置flex-grow: 5; flex-shrink: 1; flex-basis: 0%;。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

建議您使用此速記屬性，而不是設置單個屬性。速記智能地設置其他值。

對齊自我

align-items這允許為單個彈性項目覆蓋默認對齊方式（或由指定的對齊方式）。

請參閱align-items說明以了解可用值。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

請注意float，clear和vertical-align對彈性項目沒有影響。

為 Flexbox 添加前綴

Flexbox 需要一些供應商前綴來支持盡可能多的瀏覽器。它不僅包括帶有供應商前綴的屬性，而且實際上還有完全不同的屬性和值名稱。這是因為 Flexbox 規(guī)范隨著時間的推移發(fā)生了變化，創(chuàng)建了“舊”、“補間”和“新”版本。

也許處理這個問題的最好方法是編寫新的（也是最終的）語法并通過Autoprefixer運行你的 CSS ，它可以很好地處理回退。

或者，這里有一個 Sass@mixin來幫助處理一些前綴，它也讓你知道需要做什么樣的事情：

@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
}

@mixin order($val) {
  -webkit-box-ordinal-group: $val;  
  -moz-box-ordinal-group: $val;     
  -ms-flex-order: $val;     
  -webkit-order: $val;  
  order: $val;
}

.wrapper {
  @include flexbox();
}

.item {
  @include flex(1 200px);
  @include order(2);
}css

例子

讓我們從一個非常簡單的例子開始，解決一個幾乎每天都會遇到的問題：完美居中。如果你使用 flexbox，它再簡單不過了。

.parent {
  display: flex;
  height: 300px; /* Or whatever */
}

.child {
  width: 100px;  /* Or whatever */
  height: 100px; /* Or whatever */
  margin: auto;  /* Magic! */
}

這依賴于auto彈性容器中設置的邊距吸收額外空間的事實。因此，設置邊距auto將使項目在兩個軸上完美居中。

現(xiàn)在讓我們使用更多的屬性。考慮一個包含 6 個項目的列表，所有項目都具有固定尺寸，但可以自動調整大小。我們希望它們在水平軸上均勻分布，這樣當我們調整瀏覽器大小時，一切都可以很好地縮放，并且沒有媒體查詢。

.flex-container {
  /* We first create a flex layout context */
  display: flex;

  /* Then we define the flow direction 
     and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;

  /* Then we define how is distributed the remaining space */
  justify-content: space-around;
}

完畢。其他一切都只是一些造型問題。

讓我們試試別的。想象一下，我們網(wǎng)站頂部有一個右對齊的導航元素，但我們希望它在中型屏幕上居中，在小型設備上為單列。很容易。

/* Large */
.navigation {
  display: flex;
  flex-flow: row wrap;
  /* This aligns items to the end line on main-axis */
  justify-content: flex-end;
}

/* Medium screens */
@media all and (max-width: 800px) {
  .navigation {
    /* When on medium sized screens, we center it by evenly distributing empty space around items */
    justify-content: space-around;
  }
}

/* Small screens */
@media all and (max-width: 500px) {
  .navigation {
    /* On small screens, we are no longer using row direction but column */
    flex-direction: column;
  }
}

讓我們通過玩彈性項目的靈活性來嘗試更好的東西！帶有全寬頁眉和頁腳的移動優(yōu)先 3 列布局怎么樣？并且獨立于源順序。

.wrapper {
  display: flex;
  flex-flow: row wrap;
}

/* We tell all items to be 100% width, via flex-basis */
.wrapper > * {
  flex: 1 100%;
}

/* We rely on source order for mobile-first approach
 * in this case:
 * 1. header
 * 2. article
 * 3. aside 1
 * 4. aside 2
 * 5. footer
 */

/* Medium screens */
@media all and (min-width: 600px) {
  /* We tell both sidebars to share a row */
  .aside { flex: 1 auto; }
}

/* Large screens */
@media all and (min-width: 800px) {
  /* We invert order of first sidebar and main
   * And tell the main element to take twice as much width as the other two sidebars 
   */
  .main { flex: 2 0px; }
  .aside-1 { order: 1; }
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}

瀏覽器支持

此瀏覽器支持數(shù)據(jù)來自Caniuse，其中包含更多詳細信息。數(shù)字表示瀏覽器支持該版本及更高版本的功能。

錯誤

Flexbox 當然也不是沒有缺陷。我見過的最好的集合是 Philip Walton 和 Greg Whitworth 的Flexbugs。這是一個跟蹤所有這些的開源地方，所以我認為最好只鏈接到它。

在線咨詢

上一篇：「轉行測試開發(fā)-HTML」(六)-div和span、圖像標簽的使用
下一篇：俄烏沖突以來的圖書出版業(yè)：《歐洲之門》熱銷，作家呼喚和平

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商