一、flex 弹性布局实现居中

  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;