flex 弹性布局很好用，解决了我的排版问题，下面记录下我使用flex 弹性布局解决的一些常见问题，以供以后查阅！
一、基本概念介绍
（一）基本用法
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
1、flex-direction
分布方向，有两个值：
- row：水平分布
- column：垂直分布
2、justify-content
分布样式，常见值有：
- center：在分布方向上，居中；比如若是水平分布，那么就是水平居中，若是垂直分布，那么就是垂直居中；
- space-between：在分布方向上，所有元素等间隔分布，两边元素靠边
3、align-items
分布方向的反方向内部元素样式。比如：
情况一：
display: flex;
flex-direction: row;
align-items: center;
上面的意思是：水平分布，垂直方向上元素居中
情况二：
display: flex;
flex-direction: column;
align-items: center;
上面的意思是：垂直分布，水平方向上元素居中
（二）灵活用法–元素居中
这里以让元素居中为例进行讲解。比如我需要让一个元素不论怎样都居中，那么我们就可以让这个元素被一个<div>包裹，然后设置弹性布局：
案例，让我爱我家四个文字水平、上下居中：
<div class="parent">
<text>我爱我家</text>
</div>
CSS1可行：
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
CSS2也可行：
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;