本系列文章将会对CSS的flex布局做一个简单的介绍，希望读者朋友们能够对它的功能有一个整体的认知，在工作中可以自由的运用。
这是本系列文章的第二篇，将分别介绍flex布局中主轴侧轴的概念、元素在主轴方向上的排列规则、元素在侧轴方向上的排列规则。
什么主轴和侧轴？
默认情况下，主轴的方向为从左到右，侧轴的方向为从上到下。可以通过flex-direction属性改变主轴、侧轴的方向。主轴、侧轴方向的改变影响元素的布局。
flex-direction: row (默认)
主轴方向：从左到右
侧轴方向：从上到下
默认.png
flex-direction: row-reverse
主轴方向：从右到左
侧轴方向：从上到下
演示.png
flex-direction: column
主轴方向：从上到下
侧轴方向：从左到右
演示.png
flex-direction: column-reverse
主轴方向：从下到上
侧轴方向：从左到右
演示.png
元素在主轴上的排列规则
只有子元素不能占满主轴时，才需要考虑它们在主轴上的排列规则。可以通过justify-content属性改变排列规则。
justify-content: flex-start (默认)
元素顺着主轴方向依次排列
演示.png
justify-content: flex-end
元素逆着主轴方向依次排列
演示.png
justify-content: center
元素在主轴方向上居中排列
演示.png
justify-content: space-between
多余空间均匀分布在子元素间
演示.png
justify-content: space-around
多余空间均匀环绕在子元素间
演示.png
元素在侧轴上的排列规则
只有子元素不能占满侧轴时，才需要考虑它们在侧轴上的排列规则。可以通过align-items属性改变排列规则。
align-items: flex-start
元素顺着侧轴方向排列
演示.png
align-items: flex-end
元素逆着侧轴方向排列
演示.png
align-items: center
元素在侧轴方向上居中排列
演示.png
align-items: stretch （默认）
未设置高度的子元素会占满整个侧轴。
演示.png
部分源码
<style>
.row-reverse{
flex-direction: row-reverse;
}
.column{
flex-direction: column;
}
.column-reverse{
flex-direction: column-reverse;
}
.wrapper{
display: flex;
height: 100px;
background: #eee;
}
.red{
background: red;
}
.yellow{
background: yellow;
}
.orange{
background: orange;
}
.w100{
width: 100px;
}
.h100{
height: 100px;
}
.w200{
width: 200px;
}
.h200{
height: 200px;
}
.w600{
width: 600px;
}
.h600{
height: 600px;
}
</style>
<div class="wrapper w600 h600">
<div class="box w100 h100 red"></div>
<div class="box w100 h100 orange"></div>
<div class="box w100 h100 red"></div>
<div class="box w100 h100 orange"></div>
<div class="box w100 h100 red"></div>
<div class="box w100 h100 orange"></div>
<div class="box w100 h100 red"></div>
</div>
