1.弹性布局，解决高度塌陷的问题
2.弹性布局只对他的直接子元素控制，子元素的子元素不控制
3.弹性布局有主轴概念，当x轴为主轴，y为侧轴，默认主轴的方向从左到右。
flex-direction: row/row-reverse；从左到右/从右到左
当y轴为主轴时侧轴为x轴，默认方向是从上到下。
flex-direction: column/column-reverse 从上到下，从下到上。
4.当子元素的宽度大于父元素的宽度是会压缩子元素宽度，从而使他放在一行中去。
比如父元素框800px，子元素框200px,有10个子元素，他会按比例缩小宽度放在同一行。默认是这样的
5.如果项换行，就使用flex-wrap: wrap;设置换行，这样又牵扯到如果主轴是x轴侧轴是y轴，根据侧轴如何进行分布
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.parament{
width: 900px;
height: 800px;
border: 1px solid #333;
margin: 0 auto;
/* 设置为弹性容器，只对他的直接子元素child管用，间接的不管用 */
display: flex;
/* 设置主轴方向 */
flex-direction: row;
/* justify-content:设置主轴内容的分布情况
center:居中
flex-start:默认向主轴开始的方向靠拢
flex-end：向主轴结束的方向靠拢
space-around:平均分布两端的距离是中间距离的一半
space-between:平均分布两端没有间距
space-evenly：所有的间距都一样大
*/
justify-content: space-evenly;
/*
align-items 设置靠侧轴分布
flex-start像侧轴的开始靠拢
flex-end 向侧轴的结束方向进行靠拢
center 侧轴的中间分布
stretch 默认是拉伸，拉伸到和父元素一样高，因为子元素设置了高度，所以不会拉伸
*/
align-items: center;
/* 设置换行flex-wrap
nowrap 默认值不换行
wrap 设置换行
*/
flex-wrap: wrap;
/* 设置侧轴的多行分布align-content
flex-end 多行内容往侧轴的结束靠拢
flex-start 多行内容往侧轴的开始靠拢
center 多行居中
space-around 平均分布，两边有间距，间距是中间的一半
space-between 平均分布，两边没有间距
space-evenly 平均分布，所有间距一致
*/
align-content: space-evenly;
}
.child{
width: 200px;
height: 200px;
}
.c1{
background-color: cadetblue;
}
.c2{
background-color: aqua;
}
.c3{
background-color: coral;
}
</style>
</head>
<body>
<div class="parament">
<div class="child c1">1</div>
<div class="child c2">2</div>
<div class="child c3">3</div>
<div class="child c1">1</div>
<div class="child c2">2</div>
<div class="child c3">3</div>
<div class="child c1">1</div>
<div class="child c2">2</div>
<div class="child c3">3</div>
<div class="child c1">1</div>
<div class="child c2">2</div>
<div class="child c3">3</div>
</div>
</div>
</div>
</body>
</html>