Flex 是 Flexible Box 的缩写，意为"弹性布局"。
想完成上述图片盒子模型得垂直居中 就可以使用弹性布局 代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex 弹性布局</title>
</head>
<body>
<h1 style="color:blue" align="center" >结果速览</h1>
<div style="height:80px;display:flex;background:red;justify-content:center ">
<div style="background:blue"> 1</div>
<div style="background:green">2 <div style="background:yellow">3</div></div>
</div>
</body>
</html>结果如下：
注意，设为 Flex 布局以后，它得子元素中float、clear和vertical-align属性将会失效。
flex 可以让一个大的div 子元素下的 盒子模型横向排列
.div-box{
display: flex;
}
justify-content属性定义了项目在主轴上的对齐方式。
.div-box{
justify-content:center;
}
详细学习查看弹性布局，用来为盒状模型提供最大的灵活性。
473
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
