五月综合缴情婷婷六月,色94色欧美sute亚洲线路二,日韩制服国产精品一区,色噜噜一区二区三区,香港三级午夜理伦三级三

您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > 網(wǎng)頁布局（layout）之Flex 布局教程學(xué)習(xí)總結(jié)

網(wǎng)頁布局（layout）之Flex 布局教程學(xué)習(xí)總結(jié)

文章來源：365jz.com     點(diǎn)擊數(shù)：468    更新時(shí)間：2017-12-20 10:56   參與評(píng)論

網(wǎng)頁布局（layout）是 CSS 的一個(gè)重點(diǎn)應(yīng)用。

布局的傳統(tǒng)解決方案，基于盒狀模型，依賴 display 屬性 + position屬性 + float屬性。它對(duì)于那些特殊布局非常不方便，比如，垂直居中就不容易實(shí)現(xiàn)。

2009年，W3C 提出了一種新的方案----Flex 布局，可以簡(jiǎn)便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁面布局。目前，它已經(jīng)得到了所有瀏覽器的支持，這意味著，現(xiàn)在就能很安全地使用這項(xiàng)功能。



Flex 布局將成為未來布局的首選方案。本文介紹它的語法
 

一、Flex 布局是什么？

Flex 是 Flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。

任何一個(gè)容器都可以指定為 Flex 布局。


.box{
  display: flex;
}

行內(nèi)元素也可以使用 Flex 布局。


.box{
  display: inline-flex;
}

Webkit 內(nèi)核的瀏覽器，必須加上-webkit前綴。


.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

注意，設(shè)為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效。

二、基本概念

采用 Flex 布局的元素，稱為 Flex 容器（flex container），簡(jiǎn)稱"容器"。它的所有子元素自動(dòng)成為容器成員，稱為 Flex 項(xiàng)目（flex item），簡(jiǎn)稱"項(xiàng)目"。

容器默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點(diǎn)）叫做main start，結(jié)束位置叫做main end；交叉軸的開始位置叫做cross start，結(jié)束位置叫做cross end。

項(xiàng)目默認(rèn)沿主軸排列。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size。

三、容器的屬性

以下6個(gè)屬性設(shè)置在容器上。

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

3.1 flex-direction屬性

flex-direction屬性決定主軸的方向（即項(xiàng)目的排列方向）。


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

它可能有4個(gè)值。

  • row（默認(rèn)值）：主軸為水平方向，起點(diǎn)在左端。
  • row-reverse：主軸為水平方向，起點(diǎn)在右端。
  • column：主軸為垂直方向，起點(diǎn)在上沿。
  • column-reverse：主軸為垂直方向，起點(diǎn)在下沿。

3.2 flex-wrap屬性

默認(rèn)情況下，項(xiàng)目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。


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

它可能取三個(gè)值。

（1）nowrap（默認(rèn)）：不換行。

（2）wrap：換行，第一行在上方。

（3）wrap-reverse：換行，第一行在下方。

3.3 flex-flow

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式，默認(rèn)值為row nowrap。


.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

3.4 justify-content屬性

justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式。


.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

它可能取5個(gè)值，具體對(duì)齊方式與軸的方向有關(guān)。下面假設(shè)主軸為從左到右。

  • flex-start（默認(rèn)值）：左對(duì)齊
  • flex-end：右對(duì)齊
  • center： 居中
  • space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等。
  • space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。

3.5 align-items屬性

align-items屬性定義項(xiàng)目在交叉軸上如何對(duì)齊。


.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

它可能取5個(gè)值。具體的對(duì)齊方式與交叉軸的方向有關(guān)，下面假設(shè)交叉軸從上到下。

  • flex-start：交叉軸的起點(diǎn)對(duì)齊。
  • flex-end：交叉軸的終點(diǎn)對(duì)齊。
  • center：交叉軸的中點(diǎn)對(duì)齊。
  • baseline: 項(xiàng)目的第一行文字的基線對(duì)齊。
  • stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度。

3.6 align-content屬性

align-content屬性定義了多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。


.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

該屬性可能取6個(gè)值。

  • flex-start：與交叉軸的起點(diǎn)對(duì)齊。
  • flex-end：與交叉軸的終點(diǎn)對(duì)齊。
  • center：與交叉軸的中點(diǎn)對(duì)齊。
  • space-between：與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布。
  • space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
  • stretch（默認(rèn)值）：軸線占滿整個(gè)交叉軸。

四、項(xiàng)目的屬性

以下6個(gè)屬性設(shè)置在項(xiàng)目上。

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

4.1 order屬性

order屬性定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。


.item {
  order: <integer>;
}

4.2 flex-grow屬性

flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。


.item {
  flex-grow: <number>; /* default 0 */
}

如果所有項(xiàng)目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個(gè)項(xiàng)目的flex-grow屬性為2，其他項(xiàng)目都為1，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍。

4.3 flex-shrink屬性

flex-shrink屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。


.item {
  flex-shrink: <number>; /* default 1 */
}

如果所有項(xiàng)目的flex-shrink屬性都為1，當(dāng)空間不足時(shí)，都將等比例縮小。如果一個(gè)項(xiàng)目的flex-shrink屬性為0，其他項(xiàng)目都為1，則空間不足時(shí)，前者不縮小。

負(fù)值對(duì)該屬性無效。

4.4 flex-basis屬性

flex-basis屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來大小。


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

它可以設(shè)為跟width或height屬性一樣的值（比如350px），則項(xiàng)目將占據(jù)固定空間。

4.5 flex屬性

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選。


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

該屬性有兩個(gè)快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建議優(yōu)先使用這個(gè)屬性，而不是單獨(dú)寫三個(gè)分離的屬性，因?yàn)闉g覽器會(huì)推算相關(guān)值。

4.6 align-self屬性

align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。


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

該屬性可能取6個(gè)值，除了auto，其他都與align-items屬性完全一致。
 

你會(huì)看到，不管是什么布局，F(xiàn)lex往往都可以幾行命令搞定。


 

一、骰子的布局

骰子的一面，最多可以放置9個(gè)點(diǎn)。

下面，就來看看Flex如何實(shí)現(xiàn)，從1個(gè)點(diǎn)到9個(gè)點(diǎn)的布局。

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


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

上面代碼中，div元素（代表骰子的一個(gè)面）是Flex容器，span元素（代表一個(gè)點(diǎn)）是Flex項(xiàng)目。如果有多個(gè)項(xiàng)目，就要添加多個(gè)span元素，以此類推。

1.1 單項(xiàng)目

首先，只有左上角1個(gè)點(diǎn)的情況。Flex布局默認(rèn)就是首行左對(duì)齊，所以一行代碼就夠了。


.box {
  display: flex;
}

設(shè)置項(xiàng)目的對(duì)齊方式，就能實(shí)現(xiàn)居中對(duì)齊和右對(duì)齊。


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



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

設(shè)置交叉軸對(duì)齊方式，可以垂直移動(dòng)主軸。


.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 雙項(xiàng)目


.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 三項(xiàng)目


.box {
  display: flex;
}

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

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

1.4 四項(xiàng)目


.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 六項(xiàng)目


.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 九項(xiàng)目


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

二、網(wǎng)格布局

2.1 基本網(wǎng)格布局

最簡(jiǎn)單的網(wǎng)格布局，就是平均分布。在容器里面平均分配空間，跟上面的骰子布局很像，但是需要設(shè)置項(xiàng)目的自動(dòng)縮放。

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

某個(gè)網(wǎng)格的寬度為固定的百分比，其余網(wǎng)格平均分配剩余的空間。

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）指的是一種最常見的網(wǎng)站布局。頁面從上到下，分成三個(gè)部分：頭部（header），軀干（body），尾部（footer）。其中軀干又水平分成三欄，從左到右為：導(dǎo)航、主欄、副欄。

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 {
  /* 兩個(gè)邊欄的寬度設(shè)為12em */
  flex: 0 0 12em;
}

.HolyGrail-nav {
  /* 導(dǎo)航放到最左邊 */
  order: -1;
}

如果是小屏幕，軀干的三欄自動(dòng)變?yōu)榇怪悲B加。


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

五、懸掛式布局

有時(shí)，主欄的左側(cè)或右側(cè)，需要添加一個(gè)圖片欄。

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

六、固定的底欄

有時(shí)，頁面內(nèi)容太少，無法占滿一屏的高度，底欄就會(huì)抬高到頁面的中間。這時(shí)可以采用Flex布局，讓底欄總是出現(xiàn)在頁面的底部。

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

七，流式布局

每行的項(xiàng)目數(shù)固定，會(huì)自動(dòng)分行。

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

 

如對(duì)本文有疑問，請(qǐng)?zhí)峤坏浇涣髡搲瑥V大熱心網(wǎng)友會(huì)為你解答??！ 點(diǎn)擊進(jìn)入論壇

發(fā)表評(píng)論 (468人查看，0條評(píng)論)
請(qǐng)自覺遵守互聯(lián)網(wǎng)相關(guān)的政策法規(guī)，嚴(yán)禁發(fā)布色情、暴力、反動(dòng)的言論。
昵稱：
最新評(píng)論
------分隔線----------------------------

其它欄目

· 建站教程
· 365學(xué)習(xí)

業(yè)務(wù)咨詢

· 技術(shù)支持
· 服務(wù)時(shí)間：9:00-18:00
365建站網(wǎng)二維碼

Powered by 365建站網(wǎng) RSS地圖 HTML地圖

copyright © 2013-2024 版權(quán)所有 鄂ICP備17013400號(hào)