flex弹性盒子布局之flex-direction和 justi

作者: CoderZb | 来源:发表于2020-02-11 13:43 被阅读0次

使用display: flex;布局时，如果想让内容垂直居中的话，使用justify-content:还是使用align-items: center;是由flex-direction的值决定的。具体如下：

.basic_area_box {
  display: flex;
  flex-direction: column;
  justify-content:center;
  width: 100%;
  height: 88px;
}

.basic_area_box {
  display: flex;
 /* 默认为row */
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 88px;
}

flex弹性盒子布局之flex-direction和 justi
使用display: flex;布局时，如果想让内容垂直居中的话，使用justify-content:还是使用al...
小程序布局技巧
弹性盒子： display：flex 弹性盒子属性flex-direction flex-direction：co...
伸缩布局
display: flex （父盒子设置为弹性布局） flex-direction: column (调整主轴方向...
小程序之弹性盒子布局
在整体布局设置display为flex 开启弹性盒子布局 flex-direction属性可以设置column(行...
CSS弹性盒子
定义弹性盒子 display: flex; flex-direction 属性 flex-direction 用来...
CSS flex弹性布局
概念父级元素设置display:flex; 子元素即按照弹性盒子布局实例 flex-direction 子元...
CSS学习总结
一、Flex-弹性盒布局弹性盒定义了子元素如何在弹性盒中布局。 1. flex-direction ，设置主轴，...
CSS——Flex 弹性布局
Flex 弹性布局常见的父项属性 flex-direction：设置主轴的方向在flex布局中，是分为主轴和...
div里img水平垂直居中
用弹性布局给div添加css display:flex;flex-direction:column;align-...
5.小程序flex布局
view组件和flexbox弹性盒子模型flex-direction: row / column 默认为row 横...