flex布局利用修改父元素display：flex实现
1 、 flex-direction属性
取值：row（默认）|| row-reverse || column || column-reverse
解释：row为横向排列，顺序为1-2-3. row-reverse为横向排列，但顺序为3-2-1. column为纵向排列，顺序为1-2-3. column-reverse为纵向排列，但顺序为3-2-1
<style>
* {
margin: 0;
padding: 0;
}
.main {
width: 900px;
height: 100px;
display: flex;
flex-direction: column-reverse;
}
.box1,
.box2,
.box3 {
width: 300px;
height: 100px;
text-align: center;
}
</style>
<body>
<div class="main">
<div class="box1" style="background-color: red">1</div>
<div class="box2" style="background-color: green">2</div>
<div class="box3" style="background-color: blue">3</div>
</div>
</body>
2、 flex-wrap属性
取值：nowrap（默认） || wrap || wrap-reverse
解释：nowrap表示不换行，wrap表示换行，wrap-reverse表示换行，第一排紧紧贴在容器底部。
3、 justify-content属性
取值：flex-start（默认）|| flex-end || center || space-between || space-around
解释：表示横轴对齐方式：flex-start表示左对齐，flex-end为右对齐，center居中对齐，space-between表示左右两端对齐，space-around为项目之间间距为左右两侧项目到容器间距的2倍
3、 align-items属性
取值：flex-start || flex-end || center || baseline || stretch（默认）
解释：表示纵轴排列方式：stretch表示不设置高度，占满整个屏幕。flex-start表示纵轴紧贴容器顶部。center表示在纵轴中心排列。flex-end表示紧贴容器底部。baseline表示以第一行文字的基线为参照
4、 align-content属性
表示多行项目的对齐方式，和align-item一样