Flex纵向排列详解

一、Flex纵向排列换行

在使用flex布局时，如果需要创建一些元素纵向排列，当元素在一行排列时会导致元素溢出，这时可以使用纵向排列换行。实现方法是在容器中添加 flex-wrap: wrap 属性，这样可以让元素在容器内自动换行，从而避免元素溢出问题。

.container{
  display: flex;
  flex-wrap: wrap;
}

二、Flex布局纵向排列

在Flex布局中，可以通过设置容器的 flex-direction: column 属性来实现纵向排列，容器内的子元素将会从上到下排列。

.container{
  display: flex;
  flex-direction: column;
}

三、Flex横向排列

与纵向排列类似，通过设置容器的 flex-direction: row 属性可以实现横向排列，容器内的子元素将会从左到右排列。

.container{
  display: flex;
  flex-direction: row;
}

四、Flex垂直排列

通过设置子元素的 align-items: center 属性可以实现垂直排列，子元素将会在容器的垂直方向上居中对齐。

.container{
  display: flex;
  align-items: center;
}

五、Flex竖向排列

通过设置子元素的 justify-content: center 属性可以实现竖向排列，子元素将会在容器的水平方向上居中对齐。

.container{
  display: flex;
  justify-content: center;
}

六、Flex布局竖着排列

通过设置容器的 flex-direction: column 和子元素的 justify-content: space-between 属性可以实现竖着排列，并使子元素之间保持等距离分布。

.container{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

七、Flex反向排列

通过设置容器的 flex-direction: column-reverse 属性可以实现反向排列，容器内的子元素顺序将会从下到上排列。

.container{
  display: flex;
  flex-direction: column-reverse;
}

八、Flex布局横向排列

通过设置容器的 flex-direction: row-reverse 属性可以实现布局横向排列，容器内的子元素顺序将会从右到左排列。

.container{
  display: flex;
  flex-direction: row-reverse;
}

九、Flex布局垂直排列

通过设置容器的 align-items: flex-end 属性可以实现布局垂直排列，子元素将会在容器的垂直方向上靠底对齐。

.container{
  display: flex;
  align-items: flex-end;
}

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com