在最近小程序的学习中，几乎都是flex布局，所以趁机会学习一下flex布局~
flex container和flex item：
这两个概念其实很简单，就是一个div里面嵌套多个子div，此时外层的div就可以看作是flex container，而该div下的直接子div可以看作是flex item。
<html>
<head>
<title>flex布局</title>
<style>
.container {
width: 500px;
height: 500px;
border: 1px solid #000;
}
.item1 {
width:200px;
height:200px;
background-color: green;
}
.item2 {
width:200px;
height:200px;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
</div>
</body>
</html>
一般来说，如果需要使用flex布局，那么就需要有flex container和flex item。
在上面代码中，暂时没有使用到flex布局，此时的效果如下图所示：
可以看到，内层的两个div都是块状元素，因此每个div都占了一行。
接着，给container设置display属性为flex，再看一下效果：
.container {
width: 500px;
height: 500px;
border: 1px solid #000;
display: flex;
}
效果如下：
可以看到，此时container内部的两个div不再是块状元素了，而变成了行内块元素。
flex-direction
如果希望内部的两个div垂直排列，可以设置container的flex-direction属性为column，这个属性的默认值是row，因此在没有设置该属性的时候，item会自动进行行排列。
.container {
width: 500px;
height: 500px;
border: 1px solid #000;
display: flex;
flex-direction: column;
}
此时的效果图如下：
flex-direction除了row和column两个取值外，还有row-reverse和column-reverse两个取值，从字面意思可以看出，这两个取值分别是将container内部的item按照行倒序的和列倒序的方式进行排序。
这里以column-reverse为例，将container的flex-direction的值设置为column-reverse，可以看到以下的效果：
从图中可以看到，container内部的item是从后往前进行分布的，也就是第一个div会最后一个显示，第二个div倒数第二个显示，以此类推。同时，它是以下为基准，依次向上排列。
主轴和交叉轴
主轴和交叉轴可以看作是二维平面的一对坐标系，在传统的画图中，都会将水平向右当做是x轴（主轴），垂直于x轴向上的作为y轴（交叉轴）。
在flex布局中，主轴和交叉轴并不是固定不变的，而是根据flex-direction的不同取值进行变化的。
当flex-direction的值为row时，主轴方向如图所示，此时交叉轴垂直于主轴向下：
当flex-direction的值为row-reverse时，主轴方向如图所示，此时交叉轴垂直于主轴向下：
当flex-direction的值为column时，主轴方向如图所示，此时交叉轴垂直于主轴水平向右：
当flex-direction的值为column-reverse时，主轴方向如图所示，此时交叉轴垂直于主轴水平向右：
justify-content和align-items
justify-content是用来设置主轴上对齐方式的，相反地，align-items用来设置交叉轴的对齐方式。
justify-content和align-items有几个共同的取值：center（居中）、flex-start、flex-end。
这里选择flex-end进行说明，flex-start与flex-end相反。
之前编写的container的flex-direction属性是column-reverse，因此它的起点是下方，主轴向上，交叉轴向左。
此时设置justify-content为flex-end：
.container {
width: 500px;
height: 500px;
border: 1px solid #000;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
效果如下：
可以看到，此时第二个div在主轴上并不是以下方作为起点，而是以上方作为起点。因此可以看出，flex-end就是调整对齐的起点。flex-start是这个属性的默认值。
justify-content还有几个其他的取值，包括：space-between（平均分布）、space-around（等距分布）等等。
align-items也有几个其他取值，包括：stretch（拉伸）、baseline（让子元素中的文字底部对齐）等等。
总结
在学习flex布局的过程中，最主要的就是需要搞清楚主轴和交叉轴的方向，这样才能对相关的CSS属性进行正确的取值。