在flex出现之前，布局基于盒模型，依赖display,position和float样式属性，但是
这几种方法要注意清除浮动，而且难以实现一些特定的布局。例如：要实现子
元素相对于父元素内部居中排列，如下图1所示，我们首先会想到利用相对定位
和绝对定位来解决，如代码1：
图1
代码1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flex弹性盒布局</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.box{
width: 100px;
height: 100px;
border: 1px solid #e3e;
position: relative; /*设置父元素为相对定位，便于子元素相对与父元素定位*/
margin: 100px auto;
}
.box>.content{
width: 40px;
height: 40px;
background-color: #093;
position: absolute; /*相对于父容器进行绝对定位*/
left: 50%;
top: 50%;
margin-top: -20px; /*margin-top设置为自身高度的负一半*/
margin-left: -20px;
}
</style>
</head>
<body>
<div class="box">
<div class="content"></div>
</div>
</body>
</html>
代码1用于实现图1的这种布局有一个明显的缺陷，就是父容器和子容器的宽度需要
固定。也就是说，如果子元素中的高度随内容而变化，高度不固定，就无法实现垂直
居中对齐。此时我们可以采用flex布局，来实现该效果。如代码2所示：
代码2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flex弹性盒布局</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.box{
height: 100px;
border: 1px solid #e3e;
display: flex; /*设置父容器为flex布局*/
}
.box>.content{
width: 40px;
height: 40px;
background-color: #093;
margin:auto; /*当设置子项的margin为auto时，会自动居中*/
}
</style>
</head>
<body>
<div class="box">
<div class="content"></div>
</div>
</body>
</html>
在代码2中父容器的宽度不需要固定，当父容器的宽度发生变化时，绿色方块始终居中。
注意：采用flex布局后，子元素的样式float，clear和vertical-align均失效。
采用flex布局的容器称为flex容器，所有的子元素会自动成为容器成员，称为flex项目。
flex容器属性：
flex-direction:决定项目的排列方向。属性值有：row，row-reverse，column，column-reverse；
flex-wrap:定义当项目超出一行时的换行方式。属性值有：nowrap，wrap，wrap-reverse。
justify-content:定义项目在主轴上的对齐方式。属性值有:flex-start，flex-end，center ，
space-between和space-around。
align-items:定义项目在交叉轴上的对齐方式。属性值有flex-start，flex-end，center，baseline，stretch。
align-content:定义多根轴线的对齐方式，如果项目只有一根轴线，则该属性不起作用。
属性值有：flex-start，flex-end，center，space-between，space-around，stretch。
flex项目的属性：
order：定义项目的排列顺序，值越小，排列越靠前，默认值为0；
flex-grow：定义项目的放大比例，默认为0。
flex-shrink：定义项目的缩小比例，默认为1。
flex-basis：定义了在分配剩余空间之前，项目占据的主轴空间。默认值为auto，即项目的实际大小。
align-self:设置单个项目的对齐方式，可覆盖flex容器设置的align-items属性。
可选值：auto，flex-start，flex-end，center，baseline，stretch。
10万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
