Flex佈局【彈性佈局】學習

時間 2020-05-05

標籤 flex 佈局彈性佈局學習欄目 Flex 简体版

原文原文鏈接

先讓咱們看看在原來的學習中遇到的問題css

以前在軟件工程的大做業中，本身從零開始學習如何開發一個網站，從頁面，到後臺，固然數據庫是大二的必修課html

在學習如何編寫一個靜態頁面的時候，徹底是自學，本身摸索，因此遇到了不少問題，本身花費了太多時間去解決問題，今天就拿其中一個比較讓我頭疼的問題來引出今天的話題數據庫

當時在初識html、css的時候，遇到了水平排放的問題，固然這個一會兒就查出來了，使用 float ，可是使用了 float 會使子元素脫離父元素的佈局，父元素的高度會變成 0 ，從而根本展現不出來ide

這個問題我當時是意識不到的，只能發現「臥槽，父元素咋就不見了呢？」佈局

而後知道了要用 clear 清除浮動具體解決過程以下：學習

1.一開始只能垂直排放flex

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>flex佈局學習</title>
 6         <style media="screen">
 7  .father{
 8  width: 500px;
 9  height: 500px;
10  border: 2px solid black;
11             }
12  .d1{
13  width: 200px;
14  height: 200px;
15  background-color: red;
16             }
17  .d2{
18  width: 200px;
19  height: 200px;
20  background-color: green;
21             }
22         </style>
23     </head>
24     <body>
25         <div class="father">
26             <div class="d1"></div>
27             <div class="d2"></div>
28         </div>
29     </body>
30 </html>

View Code

2.1在css部分添加 float，並再添加一個粉色的且不須要浮動的d3網站

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>flex佈局學習</title>
 6         <style media="screen">
 7  .father{
 8  width: 500px;
 9  height: 500px;
10  border: 2px solid black;
11             }
12  .d1{
13  width: 200px;
14  height: 200px;
15  background-color: red;
16  float: left;
17             }
18  .d2{
19  width: 200px;
20  height: 200px;
21  background-color: green;
22  float: left;
23             }
24  .d3{
25  width: 300px;
26  height: 300px;
27  background-color: pink;
28                 /*float: left;*/
29             }
30         </style>
31     </head>
32     <body>
33         <div class="father">
34             <div class="d1"></div>
35             <div class="d2"></div>
36             <div class="d3"></div>
37         </div>
38     </body>
39 </html>

View Code

會出現以下的bug：spa

2.2若是咱們刪除d3，且把 father的高度設爲默認會出現以下的 bug：code

具體緣由上面已經說過了這裏再也不贅述，反正很麻煩，很很差看就是了

咱們要怎麼解決呢？

3.給父元素加清浮動

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>flex佈局學習</title>
 6         <style media="screen">
 7  .clear::after{
 8  display: block;
 9  content: '';
10  clear: both;
11             }
12  .father{
13  width: 500px;
14                 /*height: 500px;*/
15  border: 2px solid black;
16             }
17  .d1{
18  width: 200px;
19  height: 200px;
20  background-color: red;
21  float: left;
22             }
23  .d2{
24  width: 200px;
25  height: 200px;
26  background-color: green;
27  float: left;
28             }
29             /*.d3{ 30  width: 300px; 31  height: 300px; 32  background-color: pink; 33  }*/
34         </style>
35     </head>
36     <body>
37         <div class="father clear">
38             <div class="d1"></div>
39             <div class="d2"></div>
40             <!-- <div class="d3"></div> -->
41         </div>
42     </body>
43 </html>

View Code

上次在一個公衆號裏看到了一篇文章介紹了 flex佈局（彈性佈局），今天打算學習一下

1.對應上面的問題咱們重新寫一個 display爲 flex的 div

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>flex佈局學習</title>
 6         <style media="screen">
 7  .clear::after{
 8  display: block;
 9  content: '';
10  clear: both;
11             }
12  .father{
13  width: 500px;
14                 /*height: 500px;*/
15  border: 2px solid black;
16             }
17  .d1{
18  width: 200px;
19  height: 200px;
20  background-color: red;
21  float: left;
22             }
23  .d2{
24  width: 200px;
25  height: 200px;
26  background-color: green;
27  float: left;
28             }
29         </style>
30         <style media="screen">
31  .flex-father{
32  display: flex;
33  width: 500px;
34                 /*height: 500px;*/
35  border: 2px solid black;
36             }
37  .f1{
38  width: 200px;
39  height: 200px;
40  background-color: red;
41             }
42  .f2{
43  width: 200px;
44  height: 200px;
45  background-color: green;
46             }
47         </style>
48     </head>
49     <body>
50         <div class="father clear">
51             <div class="d1"></div>
52             <div class="d2"></div>
53         </div>
54         <div class="flex-father">
55             <div class="f1"></div>
56             <div class="f2"></div>
57         </div>
58     </body>
59 </html>

View Code

咱們能夠發現效果是如出一轍的

2.當子元素總寬度小於父元素時，是正常展現的，那咱們再加幾個子元素試試

咱們能夠發現 flex佈局中的子元素被自動壓縮來適應父元素的大小

若是咱們不想子元素被壓縮，能夠給子元素添加 flex-shrink：0;

.f1, .f2{ flex-shrink: 0;
}

flex-shrink爲1則默認收縮

flex-shirink爲0則不收縮

1、flex與主軸方向

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>flex佈局的主軸</title>
 5     <style>
 6  .father-flex{
 7  width: 800px;
 8  height: 200px;
 9  background-color: #cccccc;
10  display: flex;
11             /*主軸方向默認爲 水平從左向右*/
12             /* flex-direction: row; */
13 
14             /* 主軸方向，水平從右往左 */
15             /* flex-direction: row-reverse; */
16 
17             /* 主軸方向從上往下 */
18             /* flex-direction: column; */
19 
20             /*主軸方向從下往上 */
21             /* flex-direction: column-reverse; */
22         }
23  .item{
24  width: 200px;
25  height: 200px;
26  border: 1px dashed #333333;
27  box-sizing: border-box;
28  font-size: 40px;
29  text-align: center;
30  line-height: 200px;
31         }
32     </style>
33 </head>
34 <body>
35    <div class="father-flex">
36        <div class="item">1</div>
37        <div class="item">2</div>
38        <div class="item">3</div>
39        <div class="item">4</div>
40    </div>
41 </body>
42 </html>

2、flex與換行

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>flex換行</title>
 5     <style>
 6  .father-flex{
 7 
 8  width: 800px;
 9             /* height: 200px; */
10  background-color: #cccccc;
11 
12  display: flex;
13             /*主軸方向默認爲 水平從左向右*/
14  flex-direction: row;
15 
16             /* flex默認的裏面的子元素是不換行，當超出時會壓縮 */
17             /* 換行 第一行在上方 */
18             /* flex-wrap: wrap; */
19 
20             /* 換行 第一行在下方 */
21  flex-wrap: wrap-reverse;
22         }
23  .item{
24  width: 200px;
25  height: 200px;
26  border: 1px dashed #333333;
27  box-sizing: border-box;
28  font-size: 40px;
29  text-align: center;
30  line-height: 200px;
31         }
32     </style>
33 </head>
34 <body>
35    <div class="father-flex">
36        <div class="item">1</div>
37        <div class="item">2</div>
38        <div class="item">3</div>
39        <div class="item">4</div>
40        <div class="item">5</div>
41    </div>
42 </body>
43 </html>

3、flex子元素在主軸上的對齊方式

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>flex項目在主軸上的對齊方式</title>
 5     <style>
 6  .father-flex{
 7 
 8  width: 800px;
 9             /* height: 200px; */
10  background-color: #cccccc;
11 
12  display: flex;
13             /*主軸方向默認爲 水平從左向右*/
14  flex-direction: row;
15 
16             /* 項目在主軸上默認爲 靠近起點 */
17             /* justify-content: flex-start; */
18 
19             /* 項目在主軸上居中 */
20             /* justify-content: center; */
21 
22             /* 項目在主軸上 靠近終點*/
23             /* justify-content: flex-end; */
24 
25             /* 項目在主軸上 兩端對齊（項目之間的間隔都相等） */
26  justify-content: space-between;
27 
28             /* 每一個項目兩側的間隔都相等 */
29             /*justify-content: space-around;*/
30 
31 
32         }
33  .item{
34  width: 200px;
35  height: 200px;
36  border: 1px dashed #333333;
37  box-sizing: border-box;
38  font-size: 40px;
39  text-align: center;
40  line-height: 200px;
41         }
42     </style>
43 </head>
44 <body>
45 
46 
47 
48    <div class="father-flex">
49        <div class="item">1</div>
50        <div class="item">2</div>
51        <div class="item">3</div>
52        <!-- <div class="item">4</div> -->
53    </div>
54 
55 </body>
56 </html>

4、flex子元素在交叉軸上的對齊方式

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>flex項目在交叉軸上的對齊方式</title>
 5     <style>
 6  .father-flex{
 7  width: 800px;
 8  height: 200px;
 9  background-color: #cccccc;
10  display: flex;
11  flex-direction: row;
12             /* 項目（子元素）在交叉軸上默認是交叉軸的起點 */
13             /* align-items: flex-start; */
14 
15             /* 項目在交叉軸上 居中對齊 */
16              /*align-items: center; */
17 
18             /* 項目在交叉軸的終點 */
19             /* align-items: flex-end; */
20 
21             /* 項目在交叉軸上 佔滿容器的高度 項目高度爲auto*/
22             /* align-items: stretch; */
23 
24             /* 項目在交叉軸上 基於第一行文字的基線對齊 */
25  align-items: baseline;
26         }
27  .item{
28  width: 100px;
29  height: 100px;
30  border: 1px dashed #333333;
31  box-sizing: border-box;
32  font-size: 24px;
33  text-align: center;
34             /* line-height: 100px; */
35  word-break: break-all;
36         }
37  .item2{
38  font-size: 16px;
39         }
40     </style>
41 </head>
42 <body>
43    <div class="father-flex">
44        <div class="item">111111111111111111111111111111111111111111111111111111111111</div>
45        <div class="item item2">2222222222222222222222222222222222222222222222222</div>
46 
47    </div>
48 </body>
49 </html>

5、項目的排序

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>flex項目的排序</title>
 5     <style>
 6  .father-flex{
 7  width: 800px;
 8  height: 200px;
 9  background-color: #cccccc;
10 
11  display: flex;
12             /*主軸方向默認爲 水平從左向右*/
13  flex-direction: row;
14         }
15  .item{
16  width: 200px;
17  height: 200px;
18  border: 1px dashed #333333;
19  box-sizing: border-box;
20  font-size: 40px;
21  text-align: center;
22  line-height: 200px;
23         }
24  .ff{
25             /* 數值越小，排序越靠前，默認爲0 */
26  order: 1;
27         }
28     </style>
29 </head>
30 <body>
31    <div class="father-flex">
32        <div class="item">1</div>
33        <div class="item ff">2</div>
34        <div class="item">3</div>
35    </div>
36 </body>
37 </html>

6、子元素在交叉軸獨自的對齊方式

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>flex項目單獨在交叉軸上的對齊方式</title>
 5     <style>
 6  .father-flex{
 7  width: 800px;
 8  height: 200px;
 9  background-color: #cccccc;
10  display: flex;
11  flex-direction: row;
12             /* 項目（子元素）在交叉軸上默認是交叉軸的起點 */
13             /* align-items: flex-start; */
14 
15             /* 項目在交叉軸上 居中對齊 */
16  align-items: center;
17 
18             /* 項目在交叉軸的終點 */
19             /* align-items: flex-end; */
20 
21             /* 項目在交叉軸上 佔滿容器的高度 項目高度爲auto*/
22             /* align-items: stretch; */
23         }
24  .item{
25  width: 100px;
26  height: 100px;
27  border: 1px dashed #333333;
28  box-sizing: border-box;
29  font-size: 24px;
30  text-align: center;
31  line-height: 100px;
32 
33         }
34  .item3{
35             /* 項目與其餘項目不同的對齊方式 */
36             /* align-self: flex-start; */
37             /* align-self: flex-end; */
38             /* align-self: stretch; */
39  align-self: baseline;
40         }
41 
42     </style>
43 </head>
44 <body>
45    <div class="father-flex">
46        <div class="item">1</div>
47        <div class="item">2</div>
48        <div class="item item3">3</div>
49    </div>
50 </body>
51 </html>

7、flex與柵格化佈局

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>flex與柵格化佈局</title>
 5     <style>
 6  .imgCnt {
 7  display: flex;
 8  width: 640px;
 9  flex-direction: row;
10  background-color: #dddddd;
11  flex-wrap: wrap;
12         }
13  .imgItem {
14  width: 20%;
15  border-bottom: 1px solid #dddddd;
16  border-right: 1px solid #dddddd;
17  box-sizing: border-box;
18         }
19  img{
20             /* 這個還蠻重要的，由於圖片的默認佈局是行內佈局 */
21  display: block;
22  width: 100%;
23         }
24     </style>
25 </head>
26 
27 <body>
28     <div class="imgCnt">
29         <div class="imgItem">
30             <img src="logo.png" />
31         </div>
32         <div class="imgItem">
33             <img src="logo.png" />
34         </div>
35         <div class="imgItem">
36             <img src="logo.png" />
37         </div>
38         <div class="imgItem">
39             <img src="logo.png" />
40         </div>
41         <div class="imgItem">
42             <img src="logo.png" />
43         </div>
44         <div class="imgItem">
45             <img src="logo.png" />
46         </div>
47         <div class="imgItem">
48             <img src="logo.png" />
49         </div>
50         <div class="imgItem">
51             <img src="logo.png" />
52         </div>
53         <div class="imgItem">
54             <img src="logo.png" />
55         </div>
56         <div class="imgItem">
57             <img src="logo.png" />
58         </div>
59     </div>
60 </body>
61 </html>

8、flex佈局圖文列表

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>flex佈局圖文列表</title>
 5     <style>
 6  .goodList{
 7  width: 640px;
 8  background-color: #dddddd;
 9  display: flex;
10  flex-direction: column;
11         }
12  .listItem{
13  display: flex;
14  flex-direction: row;
15  align-items: stretch;
16         }
17  .imgBox{
18  flex: 3;
19         }
20  .imgBox img{
21  display: block;
22  width: 100%;
23         }
24  .goodInfoBox{
25  flex: 7;
26  padding: 10px 0;
27  padding-left:10px;
28  display: flex;
29  flex-direction: column;
30  justify-content: space-around;
31         }
32  .goodInfoBox p, 33  .goodInfoBox h3{
34  margin: 0;
35         }
36     </style>
37 </head>
38 <body>
39     <div class="goodList">
40         <div class="listItem">
41             <div class="imgBox">
42                 <img src="good.png"/>
43             </div>
44             <div class="goodInfoBox">
45                 <h3>聯想lenovo小新V4000 15.6英寸筆記本電腦</h3>
46                 <p>月售542筆</p>
47                 <p>售價：￥1999</p>
48             </div>
49         </div>
50     </div>
51 </body>
52 </html>