<!DOCTYPE html>
<html>
<head>
<!--
弹性布局
弹性容器:设置了display:flex;这个为弹性容器,里面的子元素会按照弹性布局的方式进行布局.
弹性子元素:设置了display:flex;的弹性容器的直接子元素即为弹性子元素
弹性主轴方向:
默认主轴方向为从左到右flex-direction: row;
从上往下flex-direction: column;
-->
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/* parent元素为弹性容器 */
.parent{
width: 800px;
height: 800px;
border: 1px solid #cccc;
margin: 0 auto;
/* 设置为弹性容器 */
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
/* 设置换行 flex-wrap
nowrap:不换行默认值
wrap:换行
*/
flex-wrap: wrap;
/*
设置侧轴多行的分布align-content
flex-start多行内容往侧轴的开端靠拢
flex-end 多行内容往侧轴结束端靠拢
center 多行内容居中
space-between 平均分布,两边没有间距
space-around: 平均分布,两边有间距,两边间距是中间的一半
space-evenly: 平均分布,所有的间距一致
*/
/* align-content:center; */
}
/* child元素为弹性子元素 */
.child{
width: 200px;
height: 200px;
}
.a1{
background: yellow;
}
.a2{
background: skyblue;
}
.a3{
background: pink;
}
</style>
</head>
<body>
<div class="parent">
<div class="child a1">111</div>
<div class="child a2">222</div>
<div class="child a3">333</div>
<div class="child a1">111</div>
<div class="child a2">222</div>
<div class="child a3">333</div>
<div class="child a1">111</div>
<div class="child a2">222</div>
<div class="child a3">333</div>
<div class="child a1">111</div>
<div class="child a2">222</div>
<div class="child a3">333</div>
</div>
</body>
</html>
版权声明：本文为weixin_46474458原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。