css flex 纵向布局

CSS Flexbox是一种用于创建灵活的布局的CSS模块，它提供了一种简单而强大的方式来对元素进行排列和对齐。在Flexbox中，纵向布局可以通过设置flex容器的属性来实现。

要实现纵向布局，首先需要创建一个flex容器，即将要进行布局的父元素。可以通过设置父元素的`display`属性为`flex`或`inline-flex`来将其定义为flex容器。例如：

.container {
  display: flex;
}

接下来，可以使用`flex-direction`属性来指定主轴的方向。默认情况下，主轴是水平方向，但是通过设置`flex-direction: column`可以将主轴方向改为垂直方向。例如：

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

然后，可以使用其他flex属性来控制子元素在容器中的布局。例如，可以使用`justify-content`属性来控制子元素在主轴上的对齐方式，使用`align-items`属性来控制子元素在交叉轴上的对齐方式。以下是一些常用的属性：
- `justify-content: flex-start`：子元素在主轴上顶部对齐
- `justify-content: flex-end`：子元素在主轴上底部对齐
- `justify-content: center`：子元素在主轴上居中对齐
- `align-items: flex-start`：子元素在交叉轴上顶部对齐
- `align-items: flex-end`：子元素在交叉轴上底部对齐
- `align-items: center`：子元素在交叉轴上居中对齐

通过组合使用这些属性，可以实现不同的纵向布局效果。