最近学习前端布局时接触到了css3新增属性----flex；作为初学前端的小白，之前使用的都是float（浮动）给文档流的同行放置盒子模型，繁琐的操作下还需要一步步对比原页面，一次又一次地摁下Fn+F12键，在成堆的标签和属性中找bug（yue~~~），以至于数个小时后勉强完成网页还原时还觉得自己很厉害哈哈哈。其实选择效率更高的flex比用浮动，调边距的老办法才更加明智。
相信我，flex的功能超乎你的想象！！！
扯远了，废话不多说，上干货啦~
目录
Flex
通俗的讲，就是为了让矫情（独占一行）的盒子聚集在一起，让他们和睦相处，快乐玩耍。
flex是一种一维的布局模型，它给 所在盒子 的子元素之间提供了强大的空间分布和对齐能力。一次只能处理一个维度上的元素布局，一行或者一列。这样的直接的好处就是，整行的父级盒子模型不用脱离文档流，避免空间不足导致的溢出换行，和新增盒子模型的向上镶嵌（呃呃大概这个意思，you know )。
1.简单模型
这里把flex定义的整行大盒子画出来，可以用建立坐标轴的方式理解其原理与用法。其中横轴纵轴各自横穿盒子中部，交汇于中心，各与四条边的中点相交作为各自的起始点和终止点。看着上面的图会比较好理解点，这是后面理解flex语法的基石，兄弟们不要草草带过~
2.属性+语法
一.声明flex显示模式
div{
display:flex;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.box {
margin: 100px auto;
width: 600px;
height: 100px;
/* 声明flex属性 */
display: flex;
justify-content: center;
background-color: rgb(167, 108, 222);
}
.sbox {
width: 100px;
height: 80px;
border: 1px solid black;
background-color: rgb(101, 101, 221);
}
</style>
<body>
<div class="box">
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
</div>
</body>
</html>
二.justify-content
作用：确定横轴上元素的对齐方式。下面介绍几种常见形式。其中最后三个感觉比较实用，有了这个就不用默默计算同列中盒子的margin和padding值是多少啦~
（1）justify-constent:center;
.box {
margin: 100px auto;
width: 600px;
height: 100px;
/* 声明flex属性 */
display: flex;
justify-content: center;
background-color: rgb(167, 108, 222);
}
（2）justify-content: end;
（3）justify-content: start;
（4）justify-content: space-around; （每个盒子两侧的边距是一样的）
（5） justify-content: space-between;（每个盒子之间的边距是一样的，不考虑父级盒子边缘）
（6） justify-content: space-evenly;（上一条语法的考虑父级盒子边缘版，应该不难理解）
三.align-items
作用：确定元素在纵轴方向的对齐方式和空间分配等等。可以理解成你把屏幕横过来看上一板块(～￣▽￣)～
（1）align-items: center;
（2）align-items: start;
（3） align-items: end;
（4） align-items: stretch;
如下图，盒子本未设置高度，但也被自动拉伸填满父级标签
四.flex-wrap
作用：当父级盒子宽度固定且有限，同行子盒子过多无法填满就会溢出，该属性能够使放不下的盒子放到同宽的新的一行。（该属性默认为nowrap，即不换行）
注意：由溢出而新生成的行也遵循flex原则！
.box {
margin: 100px auto;
width: 500px;
height: 200px;
/* 声明flex属性 */
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
background-color: rgb(167, 108, 222);
}
换行前：
换行后：
五.align-content
作用：就是当有多行flex型盒子纵向排列时，可以调整竖直方向分布，比如每行盒子居中显示，等距显示，啥啥啥的，已经词不达意咯😂，下面就随便说几种吧。
（1）align-content: space-between;
.box {
margin: 100px auto;
width: 500px;
height: 200px;
/* 声明flex属性 */
display: flex;
flex-wrap: wrap;
align-content: space-between;
background-color: rgb(167, 108, 222);
}
（2） align-content: space-around;
（3） align-content: space-evenly;
（4） align-content: center;
六.“flex：”用法
作用：为盒子分配比例。
<style>
.box {
margin: 100px auto;
width: 500px;
height: 100px;
/* 声明flex属性 */
display: flex;
align-content: center;
}
.sbox {
width: 100px;
height: 80px;
border: 1px solid black;
}
.s1 {
flex: 3;
background-color: rgb(161, 50, 173);
}
.s2 {
flex: 2;
background-color: rgb(51, 63, 170);
}
.s3 {
flex: 1;
background-color: rgb(74, 193, 126);
}
.s4 {
flex: 3;
background-color: rgb(190, 222, 95);
}
</style>
<body>
<div class="box">
<div class="sbox s1"></div>
<div class="sbox s2"></div>
<div class="sbox s3"></div>
<div class="sbox s4"></div>
</div>
</body>
分配效果如下：（3：2：1：3）
OK，至此，flex的一些常用用法介绍完了，稍稍掌握，可以试试不使用浮动和加margin或padding做出稍微复杂的板块布局啦~
无他，唯手熟尔 ;-)
3.总结
flex可以实打实提高页面开发效率，节约开发时间，确实值得好好学习一下。另外，虽然flex在好多页面开发中很常用，但往往是多种布局方法实现，要多实战，多学习不一样的代码风格，学会哪一种样式用哪一种布局更加合适（小白我也正在学习中），不要写了这个忘了那个，捡了芝麻丢了西瓜。xdm，加油，欧里给~
834
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
