1.flex-direction
主轴的方向，子项目按照主轴的方向从起点开始排列
- row ，默认值，水平主轴，起点在左；
- row-reverse，水平主轴，起点在右；
- column，垂直主轴，起点在上；
- column-reverse，垂直主轴，起点在下
2.flex-wrap
flex-wrap属性决定子元素主轴摆放不下时，项目是否换行，默认不换行。
none，默认值，不换行；（摆放不下按比例缩放）wrap，换行，第一排在最前；wrap-reverse，换行，最后一排在最前。
3.justify-content
center:居中对齐
- flex-start:主轴方向的设置，起始位置对齐
- flex-end:主轴方向的设置，结束位置对齐
- space-between:元素左右贴边，距离相等
- space-around:左右元素距左右侧的距离为x，中间元素相距2x，总体距离和为空白区域
- space-evenly:元素距左右侧及元素之间的距离均分空白区域
4.align-content
同justify-content相似。属性默认值为stretch。元素会由上或左进行排列（取决于主轴方向），填充整个区域
5.align-items
同justify-content相似，属性可为stretch，还可为baseline；
以下示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a {
width: 500px;
height: 500px;
background-color: skyblue;
display: flex;
justify-content: space-between;
}
.a div {
height: 50px;
width: 50px;
border-radius: 50%;
background-color: orange;
}
.a div:nth-child(2) {
align-self: flex-end;
}
</style>
</head>
<body>
<div class="a">
<div></div>
<div></div>
</div>
</body>
</html>
