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>