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

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;
}

结果:
微信小程序开发 文本内容上下左右居中理解_第1张图片
2.

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

结果:
微信小程序开发 文本内容上下左右居中理解_第2张图片

垂直布局的时候(从上到下):
1.

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

结果:
微信小程序开发 文本内容上下左右居中理解_第3张图片
2.

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

结果:
微信小程序开发 文本内容上下左右居中理解_第4张图片

你可能感兴趣的:(笔记)