Flex布局弹性布局学习
Posted swallowblank
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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; flex弹性布局学习总结