Flex布局【弹性布局】学习
先让我们看看在原来的学习中遇到的问题
之前在软件工程的大作业中,自己从零开始学习如何开发一个网站,从页面,到后台,当然数据库是大二的必修课
在学习如何编写一个静态页面的时候,完全是自学,自己摸索,所以遇到了很多问题,自己花费了太多时间去解决问题,今天就拿其中一个比较让我头疼的问题来引出今天的话题
当时在初识html、css的时候,遇到了水平排放的问题,当然这个一下子就查出来了,使用 float ,但是使用了 float 会使子元素脱离父元素的布局,父元素的高度会变成 0 ,从而根本展示不出来
这个问题我当时是意识不到的,只能发现“卧槽,父元素咋就不见了呢 ?”
然后知道了要用 clear 清除浮动具体解决过程如下:
1.一开始只能垂直排放
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>
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>
会出现如下的bug:
2.2如果我们删除d3,且把 father的高度设为默认会出现如下的 bug:
具体原因上面已经说过了这里不再赘述,反正很麻烦,很不好看就是了
我们要怎么解决呢 ?
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>
上次在一个公众号里看到了一篇文章介绍了 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>
我们可以发现效果是一模一样的
2.当子元素总宽度小于父元素时,是正常展示的,那我们再加几个子元素试试
我们可以发现 flex布局中的子元素被自动压缩来适应父元素的大小
如果我们不想子元素被压缩,可以给子元素添加 flex-shrink:0;
.f1, .f2{
flex-shrink: 0;
}
flex-shrink为1则默认收缩
flex-shirink为0则不收缩
一、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>
二、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>
三、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>
四、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>
五、项目的排序
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>
六、子元素在交叉轴独自的对齐方式
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>
七、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>
八、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>
今天的学习就告一段落
参考资料:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html