CSS3總結五：彈性盒子(flex)、彈性盒子佈局

時間  2019-11-16
標籤 css3 css 總結 彈性 盒子 flex 佈局 欄目 CSS 简体版
原文   原文鏈接

  • 彈性盒子容器的屬性與應用

  • display:flex/inline-flex
  • flex-direction
  • flex-wrap
  • justify-content
  • align-items
  • align-content
  • flex-flow

  • 彈性盒子子項的屬性與應用

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

  • 彈性盒子佈局

  • flex居中/T字佈局
  • 可動態增長導航欄
  • 等分佈局
  • 聖盃佈局
  • 流式佈局

 1、彈性盒子容器的屬性與應用

 1.1.定義彈性盒子display:flex/inline-flex

在盒模型（box）中剖析了單個元素的盒模型結構，那麼display則是用來定義盒子在文檔中的模型結構，好比display:inline表示爲內聯元素，display:block表示爲塊級元素，dispaly:inline-block表示爲行級塊元素；還能夠設置dispaly:table表示爲表格等，而這篇博客是來剖析CSS3的彈性盒子，flex表示爲彈性塊級盒子，inline-block表示爲行級塊盒子，這二者的區別與塊級元素和行級塊元素是同樣的，就是於相鄰元素的排列方式不一樣。css

 

注：display在CSS屬性中被分類爲佈局，與float、clear、visibility、overflow劃分爲同一類別的屬性，可是在這個分類中都是首先基於display的展現行爲爲基礎，纔有浮動，清除浮動，是否可見，溢出處理等狀態。因此display做爲佈局的核心功能，除了定義外部的元素與元素之間的排列方式，從CSS2到CSS3更是經過擴展display的參數由原來內部固定的結構模型擴展到了可自定義的結構模型，就是彈性盒子flex。html

在彈性盒子中，原來的margin,pading,content還有width的內部計算方式都不在基於瀏覽器內核默認的模型來計算，而是經過與flex相關的一系列屬性來定義計算盒子內部項（內部元素）的排列布局。這部分CSS內容對應着瀏覽器內核渲染頁面時內部調用的layout()方法。能夠這麼來講，原來的layout()直接經過識別塊級元素、行級塊元素、行級元素、表格這四種固定實現的佈局模型直接調用固定的計算模型計算出元素在頁面中展現的(結構)樣式，而CSS3中的flex佈局模式則須要瀏覽器內核調用自定義的flex相關參數來展現元素的(結構)樣式。【以上這部份內容須要對瀏覽器渲染原理有必定的瞭解，詳細能夠參考：瀏覽器加載解析渲染網頁原理】node

1.2.以主軸和交叉軸爲佈局邏輯基礎的子項位置佈局

1.2.1經過flex-direction定義主軸以及主軸方向，row（橫向自左向右）、row-reverse（橫向自右向左）、column（縱向自上向下）、column-reverse（縱向自下向上）。交叉軸始終與主軸成相對狀態。小程序

最多見的主軸與交叉軸的切換應用就是導航欄在屏幕足夠寬的時候呈橫排展現，當瀏覽器窗口縮小到必定程度時，導航欄呈縱向排列展現。瀏覽器

 

下面再來看一些具體的flex-direction的示例：app

a
b
c
a
b
c
a
b
c
a
b
c
 

 實現以上示例的核心代碼：ide

flex-direction:row;/*demo1--該值爲默認值*/
flex-direction:column;/*demo2--*/
flex-direction:row-reverse;/*demo3--*/
flex-direction:column-reverse;/*demo4--*/

1.2.2經過flex-wrap定義單行或多行的彈性盒子佈局，nowrap（單行佈局，默認值）、wrap（多行佈局）、wrap-reverse（多行，且按每行反轉排列）。該屬性主要用於啓用彈性盒子的多行佈局功能，而這裏的多行並不是傳統的縱橫排列上的行，準確的來講是當主軸上方向上出現壓縮時在交叉軸上開啓多個平行主軸方向的佈局。看下列示例：佈局

a
b
c
d
e
f
a
b
c
d
e
f
a
b
c
d
e
f
a
b
c
d
e
f
a
b
c
d
e
f
 

實現以上示例的核心代碼：post

 1 /*demo1--按照默認的主軸方向和默認的單行佈局*/
 2 flex-direction:row;
 3 flex-wrap:nowrap;
 4 /*demo2--主軸方向爲縱向，默認單行佈局*/
 5 flex-direction:column;
 6 flex-wrap:nowrap;
 7 /*demo3--主軸方向默認，採用多行佈局*/
 8 flex-direction:row;
 9 flex-wrap:wrap;
10 /*demo4--主軸方向默認，採用多行且反向排列布局*/
11 flex-direction:row;
12 flex-wrap:wrap-reverse;
13 /*demo5--主軸方向爲縱軸，採用多行佈局*/
14 flex:direction:column;
15 flex-wrap:wrap;

關於flex佈局的多行與單行能夠用塊級元素和行級塊元素的排列布局來理解，而且在多行佈局也就真正意義上實現了交叉軸的的意義，wrap-reverse能夠理解爲交叉軸方向上的反向佈局，因此它只會影響到行的起始位置和排列，並不會影響到每行子項的排列。flex

 1.2.3彈性盒子flex的對齊屬性：justify-content、align-items、align-content。

justify-content：表示主軸方向的對齊屬性，對齊方式分別有軸的正方向(起始方向)對齊、軸的反方向對其、軸的居中對齊、項目均衡散列對齊（最前方和最後方的項目與父級沒有間距）、項目正反兩側等距對齊（相似兩側加上margin）===【flex-start、flex-end、center、space-between、space-around】；

align-items:表示交叉軸方向的（行內軸）對齊屬性，屬性值(同解析中的類別順序)，對齊方式分別有軸的正方向對齊，軸的反方向對齊、基於行內軸的中心對齊、基於內容底線對齊(也能夠說是基於內容對齊)、將項基於交叉軸方向基於父級最大訪問伸縮===【flex-start、flex-end、center、baseline、strecth】；

align-content表示全部項目的總體對齊方式（只對多行起做用，準確的說這個屬性纔是交叉軸的對齊方式）對齊方式分別有軸的正方向對齊、軸的反方向對其、軸的居中對齊、沿交叉軸的行列均衡散列對齊、沿交叉軸的行列兩側等距對齊、沿交叉軸的行列平均分配空間的伸縮===【flex-start、flex-end、center、space-between、space-around、strecth】

a
b
c
a
b
c
a
b
c
a
b
c
a
b
c
 

 以上五個示例是justify-content的五個屬性值所表現的效果，代碼：

1 justify-content:start;
2 justify-content:end;
3 justify-content:center;
4 justify-content:space-between;
5 justify-content:space-around;
a
b
c
a
b
c
a
b
c
a
b
c
a
b
c
 

 以上五個示例是align-items的五個屬性值所表現的效果，代碼：

1 align-items:flex-start;/*全部子項沿上邊緣對齊，並緊貼父級的上內邊緣*/
2 align-items:flex-end;/*全部子項沿下邊緣對齊，並緊貼父級的下內邊緣*/
3 align-items:center;/*全部子項沿行內軸中線對齊*/
4 align-items:baseline;/*這裏子項b添加了margin-top:15px;子項c添加了padding-top:15px;*/
5 align-items:stretch;/*這裏全部子項沒有設置height*/
a
b
c
d
e
a
b
c
d
e
a
b
c
d
e
a
b
c
d
e
f
g
a
b
c
d
e
f
g
a
b
c
d
e
 

以上六個示例是align-content的五個屬性值所表現的效果，代碼：

1 flex-wrap:wrap;/*全部align-content示例必須都是在多行列（相對主軸）的狀況下才生效，因此這行代碼是全部示例中都有*/
2 align-content:flex-start;/*示例一*/
3 align-content:flex-end;/*示例二*/
4 align-content:center;/*示例三*/
5 align-content:space-between；/*示例四*/
6 align-content:space-around；/*示例五*/
7 align-content:stretch;/示例六，全部子項不設置height/

1.2.4最後彈性盒子容器上還有一個屬性就是flex-flow，這是個符合屬性，至關於flex-flow ：<flex-direction> || <flex-wrap>;符合屬性的應用就很少解釋了，可是因爲彈性盒子的功能複雜性建議仍是按照拆分形式書寫代碼，也有利於代碼的可讀性（語義化）。

 2、彈性盒子子項的屬性與應用

2.1order子項排序,全部子項order默認值爲0，用來指定子項的排列位置；

a
b
c
a
b
c
d
e
f
 

 上面示例中對應的order序號：

示例一：a:2，b:1，c:0；

示例二：a:5，b:4，c:3，d:2，e:1，f:0；

2.2align-self單個子項沿着交叉軸方向定位，在flex-wrap:wrap的多行多列狀況下不起做用，align-self的權重大於align-items。

a
b
c
d
e
f

 以上示例的關鍵代碼：

 1 /*父級容器的css代碼*/
 2 display:flex;
 3 justify-content: space-between;
 4 align-items:center;
 5 /*各個子項的align-self*/
 6 align-self:auto;/*繼承align-items的屬性*/
 7 align-self:flex-start;/*交叉軸的起始端*/
 8 align-self:flex-end;/*交叉軸的末尾端*/
 9 align-self:center;/*交叉軸的中間*/
10 align-self:baseline；/*表示行內軸的最上方，與flex-start的效果一致*/
11 align-self:stretch；/*基於交叉軸方向伸縮，不設置交叉軸方向的寬高*/

注：align-items和align-self只能做用於flex-wrap:nowrap(默認值)的彈性盒子上。

2.3複合屬性flex：none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>。用來設置彈性盒子子項的伸縮比率，flex-grow表示伸展比率、flex-shrink表示縮小比率、flex-basis表示彈性盒子子項在主軸方向上的最小寬度或高度。具體的計算公式經過實例來逐一解析：

2.3.1伸展比率flex-grow的計算公式與示例【重點】：

公式：if（彈性盒子內容寬度 > 子項寬度之和 ）==>flex-grow生效；

拉伸計算：（彈性盒子內容寬度 - 子項寬度之和）/ 子項flex-grow之和 * 每一個子項的flex-grow比率 = 每一個子項的拉昇寬度；

解說：flex-grow默認值爲0，拉伸計算是按照拉伸比率分配剩下的空間。拉昇方向是基於主軸方向向主軸的兩側拉伸。

示例代碼：

 1 <div class="wrapper">
 2     <div class="content">1</div>
 3     <div class="content">2</div>
 4     <div class="content">3</div>
 5 </div>
 6 <!--css-->
 7 *{
 8     margin: 0;
 9     padding: 0;
10 }
11 .wrapper{
12     width: 600px;
13     height: 600px;
14     border: 1px solid black;
15     display: flex;
16     flex-direction: row;
17 }
18 .wrapper:hover{
19     flex-direction: column;
20 }
21 
22 .content{
23     height: 100px;
24     box-sizing: border-box;
25 }
26 
27 .content:first-of-type{
28     width: 100px;
29     background-color: #aff;
30     flex-grow: 1;
31 }
32 .content:nth-of-type(2){
33     width: 80px;
34     background-color: #0ff;
35     flex-grow: 3;
36 }
37 .content:nth-of-type(3){
38     width: 50px;
39     background-color: #ffa;
40 }
View Code

2.3.2縮小比率flex-shrink的計算公式與示例【重點】：

公式：if（彈性盒子內容寬度 < 子項寬度之和 ）==>flex-shrink生效；

縮小計算：（當前被計算的子項寬度 * 當前被計算的子項的flex-shrink /（每一個子項寬度 * 該子項的flex-shrink + 每一個子項寬度 * 該子項的flex-shrink + ...））* （ 全部子項寬度之和 - 父級彈性盒子的內容寬度）== 當前被計算的子項要縮小的寬度；

解說：flex-shrink的默認值是1，實際上flex-shrink的縮小計算須要進行加權平均。若是設置flex-shrink:0表示該子項不參與壓縮。

 示例代碼：

 1 <div class="wrapper">
 2     <div class="content">1</div>
 3     <div class="content">2</div>
 4     <div class="content">3</div>
 5 </div>
 6 <!--css-->
 7 *{
 8     margin: 0;
 9     padding: 0;
10 }
11 .wrapper{
12     width: 600px;
13     height: 300px;
14     border: 1px solid black;
15     display: flex;
16     flex-direction: row;
17 }
18 .content{
19     height: 100px;
20 }
21 
22 .content:first-of-type{
23     width: 200px;
24     background-color: #aff;
25 }
26 .content:nth-of-type(2){
27     width: 200px;
28     background-color: #0ff;
29 }
30 .content:nth-of-type(3){
31     width: 400px;
32     background-color: #ffa;
33     flex-shrink: 3;
34 }
View Code

關於flex-shrink子項縮小的計算除了加權平均進行縮減之外，還須要注意的是，在實際的加權平均計算中，並不是使用子項的width計算，而實質上是使用真實的內容區寬度content-width來進行計算的。這裏特別須要主義的就算是子項使用box-sizing:border-box;其flex-shrink的計算中也不會包含border和padding的寬度（標準盒模型下也是使用content-width計算）。示例：

 示例代碼：

 1 <div class="wrapper">
 2     <div class="content"></div>
 3     <div class="content"></div>
 4     <div class="content"></div>
 5 </div>
 6 <!--css-->
 7 *{
 8     margin: 0;
 9     padding: 0;
10 }
11 .wrapper{
12     width: 600px;
13     height: 300px;
14     border: 1px solid black;
15     display: flex;
16     flex-direction: row;
17 }
18 .content{
19     width: 200px;
20     height: 100px;
21     box-sizing: border-box;
22 }
23 
24 .content:first-of-type{
25     padding: 0 100px;
26     background-color: #aff;
27 }
28 .content:nth-of-type(2){
29     padding: 0 100px;
30     background-color: #0ff;
31 }
32 .content:nth-of-type(3){
33     width: 400px;
34     background-color: #ffa;
35     flex-shrink: 3;
36 }
View Code

關於flex-shrink加權平均的計算標的爲content-width的示例二：

 

示例代碼：

 1 <div class="wrapper">
 2     <div class="content"></div>
 3     <div class="content"></div>
 4     <div class="content"></div>
 5 </div>
 6 <!--css-->
 7 *{
 8     margin: 0;
 9     padding: 0;
10 }
11 .wrapper{
12     width: 600px;
13     height: 300px;
14     border: 1px solid black;
15     display: flex;
16     flex-direction: row;
17 }
18 .content{
19     width: 200px;
20     height: 100px;
21     box-sizing: border-box;
22     padding: 0 80px;
23 }
24 
25 .content:first-of-type{
26     background-color: #aff;
27 }
28 .content:nth-of-type(2){
29     background-color: #0ff;
30 }
31 .content:nth-of-type(3){
32     width: 400px;
33     background-color: #ffa;
34     flex-shrink: 3;
35 }
View Code

2.3.3彈性盒子子項在主軸方向上的最小寬高flex-basis。

 示例代碼：

 1 <div class="wrapper">
 2     <div class="content"></div>
 3     <div class="content"></div>
 4     <div class="content"></div>
 5 </div>
 6 <!--css-->
 7 *{
 8     margin: 0;
 9     padding: 0;
10 }
11 .wrapper{
12     width: 600px;
13     height: 600px;
14     border: 1px solid black;
15     display: flex;
16     flex-direction: row;
17 }
18 .wrapper:hover{
19     flex-direction: column;
20 }
21 .content{
22     flex-basis: 200px;
23     width: 100px;
24     height: 100px;
25     box-sizing: border-box;
26     padding: 0 80px;
27 }
28 .content:nth-of-type(1){
29     background-color: #aff;
30 }
31 .content:nth-of-type(2){
32     background-color: #ffa;
33 }
34 .content:nth-of-type(3){
35     background-color: #0ff;
36 }
View Code

經過上面的示例瞭解到了flex-basis的做用是在主軸方向上的，而後還有就是它並不能徹底替代width或者height，由於flex-basis表示的是子項的主軸方向上的寬高的最小值，因此能夠同時設置flex-basis和width、height;若是隻設置flex-basis不設置width、height的話，子項能夠被內容無限撐開至彈性盒子父級容器的寬度，若是設置width、heigth的話則至撐開至width、height設置的寬高。

可是若是設置的flex-basis的值大於width、height的話，則width、height的值會被覆蓋。（這裏須要特別注意英文的換行，最好設置英文單詞能夠截斷）

 3、彈性盒子佈局

在具體介紹彈性盒子佈局以前，先說明一下這裏的示例不考慮（舊）彈性盒子的兼容性問題，部分瀏覽器並未所有兼容新的標準彈性盒子，safari瀏覽器就是最好的例子。而後這裏只介紹flex盒子的佈局模式，後期會有一篇全面解讀頁面佈局的博客。

3.1應用flex實現居中佈局與T字佈局

 
 
 
 
 
 
 
 
 
 
 
 

 實現flex居中佈局和T字佈局的徹底代碼：

  1 /*
  2 *.wrapper表示父級
  3 *.content表示子項
  4 * 只保留關鍵代碼，具體代碼能夠經過控制檯查看示例代碼
  5 */
  6 /*示例一*/
  7 .wrapper{
  8         display: flex;
  9         justify-content: center;
 10         align-items: center;
 11 }
 12 .content{
 13     flex: 0 0 50%;
 14     height: 50%;
 15 }
 16 /*示例二：效果與示例一一致*/
 17 .wrapper{
 18         display:flex;
 19         justify-content:center;
 20 }
 21 .content{
 22     flex: 0 0 50%;
 23     align-self: center;
 24 }
 25 /*示例三*/
 26  .wrapper{
 27     width: 500px;
 28     height: 300px;
 29     position: absolute;
 30     top: calc(50% - 150px);
 31     left: calc(50% - 250px);
 32     border: 1px solid #aee;
 33     border-radius: 10px;
 34 
 35     display: flex;
 36     flex-wrap: wrap;
 37 }
 38 
 39 .content{
 40     flex: 0 0 50%;
 41     background-color: #7CFC00;
 42 }
 43 .content:first-of-type{
 44     border-top-left-radius:10px; 
 45 }
 46 .content:nth-of-type(2){
 47     border-top-right-radius:10px; 
 48     background-color: #6A5ACD;
 49 }
 50 .content:last-of-type{
 51     flex-basis: 100%;
 52     border-radius:0px 0px 10px 10px; 
 53     background-color:      #FF7F00;
 54 }
 55 /*示例四*/
 56  .wrapper{
 57     width: 500px;
 58     height: 300px;
 59     position: absolute;
 60     top: calc(50% - 150px);
 61     left: calc(50% - 250px);
 62     border: 1px solid #aee;
 63     border-radius: 10px;
 64 
 65     display: flex;
 66     flex-wrap: wrap;
 67 }
 68 
 69 .content{
 70     flex: 0 0 50%;
 71     background-color: #7CFC00;
 72 }
 73 .content:first-of-type{
 74     flex-basis: 100%;
 75     border-radius:10px 10px 0px 0px; 
 76 }
 77 .content:nth-of-type(2){
 78     border-bottom-left-radius:10px; 
 79     background-color: #6A5ACD;
 80 }
 81 .content:last-of-type{
 82     border-bottom-right-radius:10px; 
 83     background-color:      #FF7F00;
 84 }
 85 /*示例五*/
 86   .wrapper{
 87     width: 500px;
 88     height: 300px;
 89     position: absolute;
 90     top: calc(50% - 150px);
 91     left: calc(50% - 250px);
 92     border: 1px solid #aee;
 93     border-radius: 10px;
 94 
 95     display: flex;
 96     flex-wrap: wrap;
 97 }
 98 
 99 .content{
100     background-color: #7CFC00;
101 }
102 .content:first-of-type{
103     flex-basis: 100%;
104     border-radius:10px 10px 0px 0px; 
105 }
106 .content:nth-of-type(2){
107     flex: 0 0 30%;
108     border-bottom-left-radius:10px; 
109     background-color: #6A5ACD;
110 }
111 .content:nth-of-type(3){
112     flex: 0 0 35%;
113     border-bottom-left-radius:10px; 
114     background-color: #660066;
115 }
116 .content:last-of-type{
117     flex: 0 0 35%;
118     border-bottom-right-radius:10px; 
119     background-color:      #FF7F00;
120 }
View Code

3.2可動態增長標籤導航欄

HTML5
CSS3
ES6
VUE
...

實現可動態增長標籤導航欄示例的代碼：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <title>可動態增長的導航欄</title>
 7     <link rel="stylesheet" href="">
 8     <style>
 9         *{
10             margin: 0;
11             padding: 0;
12         }
13         .wrapper{
14             position: absolute;
15             top: calc(50% - 15px);
16             left: calc(50% - 250px);
17 
18             width: 500px;
19             height: 30px;
20             border:1px solid #2b2b2b ;
21             box-sizing: border-box;
22 
23             display: flex;
24         }
25         .content{
26             flex: 1 1 auto;
27 
28             text-align: center;
29             line-height: 30px;
30             font-size: 20px;
31         }
32         .content:hover{
33             background-color: #2b2b2b;
34             color: #fff;
35         }
36     </style>    
37 </head>
38 <body>
39     <div class="wrapper">
40         <div class="content">HTML</div>
41         <div class="content">CSS</div>
42         <div class="content">ES6</div>
43         <div class="content">SPA</div>
44         <div class="content">...</div>
45         <!--可新增如下標籤-->
46         <!-- <div class="content">VUE</div>
47         <div class="content">node</div>
48         <div class="content">小程序</div> -->
49     </div>
50 </body>
51 </html>
View Code

3.3等分佈局（中間固定寬度，兩邊自適應）

left
middle
right

示例代碼：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <title>等分佈局</title>
 7     <!--中間寬度固定，兩邊自適應-->
 8     <link rel="stylesheet" href="">
 9     <style>
10         *{
11             margin: 0;
12             padding: 0;
13         }
14         .wrapper{
15             resize: both;
16             overflow: hidden;
17 
18             width: 600px;
19             height: 400px;
20             border: 1px solid #2b2b2b;
21 
22             display: flex;
23         }
24         .content{
25             box-sizing: border-box;
26         }
27         .content:first-of-type{
28             flex: 1 1 auto;
29         }
30         .content:nth-of-type(2){
31             flex: 0 0 400px;
32             border-left: 1px solid #2b2b2b;
33             border-right: 1px solid #2b2b2b;
34         }
35         .content:last-of-type{
36             flex: 1 1 auto;
37         }
38     </style>
39 </head>
40 <body>
41     <div class="wrapper">
42         <div class="content"></div>
43         <div class="content"></div>
44         <div class="content"></div>
45     </div>
46 </body>
47 </html>
View Code

 3.4使用flex實現聖盃佈局

 聖盃佈局的要求：

☯全局縱向分三部分：頭部、尾部高度固定，中間自動；寬度都爲100%；

☯中間被拆分爲三欄：左右寬度固定，中間自適應；

header
left
center
right
footer

示例代碼：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <title>聖盃佈局</title>
 7     <!-- 聖盃佈局的要求
 8       -- 縱向分爲上中下三部分，上中下寬度100%，上下高度固定；中間部分高度自動。
 9       -- 中間被拆分爲三欄：左右寬度固定，中間自適應；
10      -->
11     <link rel="stylesheet" href="">
12     <style>
13         *{
14             margin: 0;
15             padding: 0;
16         }
17         :root,
18         body{
19             width: 100%;
20             height: 100%;
21         }
22         .wrapper{
23             width: 100%;
24             height:100%;
25 
26             display: flex;
27             flex-direction: column;
28         }
29         .content{
30             width: 100%;
31             box-sizing: border-box;
32             border: 1px solid #2b2b2b;
33         }
34         .content:first-of-type{
35             flex: 0 0 70px;
36         }
37         .content:nth-of-type(2){
38             flex: 1 1 auto;
39             display: flex;
40         }
41         .content:last-of-type{
42             flex: 0 0 100px;
43         }
44         .content:nth-of-type(2)>div{
45             box-sizing: border-box;
46             border: 1px solid #2b2b2b;
47         }
48         .left, .right{
49             flex: 0 0 150px;
50         }
51         .middle{
52             flex: 1 1 auto;
53         }
54     </style>
55 </head>
56 <body>
57     <div class="wrapper">
58         <div class="content"></div>
59         <div class="content">
60             <div class="left"></div>
61             <div class="middle"></div>
62             <div class="right"></div>
63         </div>
64         <div class="content"></div>
65     </div>
66 </body>
67 </html>
View Code

3.5使用flex實現流式佈局

 
 
 
 
 
 
 
 
 
 
 
 
 

 示例代碼：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <title>flex實現流式佈局</title>
 7     <link rel="stylesheet" href="">
 8     <style>
 9         *{
10             padding: 0;
11             margin: 0;
12         }
13         :root,
14         body{
15             width: 100%;
16             height: 100%;
17             background-color: #2b2b2b;
18         }
19         .wrapper{
20             position: absolute;
21             top: calc(50% - 200px);
22             left: calc(50% - 300px);
23             width: 600px;
24             height: 500px;
25             display: flex;
26             flex-wrap: wrap;
27             align-content: flex-start;
28         }
29         .item{
30             width: 100px;
31             height: 100px;
32         }
33     </style>
34 </head>
35 <body>
36     <div class="wrapper">
37         <div class="item" style="background-color: #663300;"></div>
38         <div class="item" style="background-color: #663333;"></div>
39         <div class="item" style="background-color: #663366;"></div>
40         <div class="item" style="background-color: #333300;"></div>
41         <div class="item" style="background-color: #333333;"></div>
42         <div class="item" style="background-color: #333366;"></div>
43         <div class="item" style="background-color: #FF8C00;"></div>
44         <div class="item" style="background-color: #FF83FA;"></div>
45         <div class="item" style="background-color: #FF8247;"></div>
46         <div class="item" style="background-color: #FF3030;"></div>
47         <div class="item" style="background-color: #FF1493;"></div>
48         <div class="item" style="background-color: #FF0000;"></div>
49         <div class="item" style="background-color: #BF3EFF;"></div>
50         <div class="item" style="background-color: #B22222;"></div>
51         <div class="item" style="background-color: #ADFF2F;"></div>
52         <div class="item" style="background-color: #8B8B00;"></div>
53         <div class="item" style="background-color: #8B864E;"></div>
54         <div class="item" style="background-color: #663300;"></div>
55         <div class="item" style="background-color: #663333;"></div>
56         <div class="item" style="background-color: #663366;"></div>
57         <div class="item" style="background-color: #333300;"></div>
58         <div class="item" style="background-color: #333333;"></div>
59         <div class="item" style="background-color: #333366;"></div>
60         <div class="item" style="background-color: #FF8C00;"></div>
61     </div>
62 </body>
63 </html>
View Code
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程