微信小程序开发 文本内容上下左右居中理解

1.当我们的布局为默认，也就是flex-direction: row;的时候， justify-content: center;是左右居中，align-items: center;是上下居中。

而当我们的布局是flex-direction:column；的时候，上面刚好完全反过来。
2.也就是说，当布局是flex-direction:column；的时候，justify-content: center;是上下居中，align-items: center;是左右居中。

事实上也挺好理解，直接想无论什么布局，对于我们来说，布局的排列方向就是我们的横向（row的时候布局方向从左到右，column的时候布局方向从上往下），这样理解的话第一条就一直适用。(怎么好记看个人)

下面用代码来验证：
水平布局的时候（从左到右）：
1.css设置的是文字外层的容器的样式

.dd{
  display: flex;
  background-color: yellow;
  width: 300px;
  height: 100px;
  flex-direction: row;
  justify-content: center;
}

结果：

2.

.dd{
  display: flex;
  background-color: yellow;
  width: 300px;
  height: 100px;
  flex-direction: row;
  align-items: center;
}

结果：

垂直布局的时候（从上到下）：
1.

.dd{
  display: flex;
  background-color: yellow;
  width: 300px;
  height: 100px;
  flex-direction: column;
  justify-content: center; 
}

结果：

2.

.dd{
  display: flex;
  background-color: yellow;
  width: 300px;
  height: 100px;
  flex-direction: column;
  align-items: center;
}

结果：