htmlcss弹性布局怎样竖直排列

HTML/CSS中的弹性布局，也称为Flexbox，是一种用于创建灵活、响应式的网格布局方式。若要使用Flexbox实现元素的竖直排列，可以采用以下几个步骤：

1. **设置容器为flex容器**：
使用CSS `display: flex` 或 `display: -webkit-flex` 属性将包含元素的容器设置为弹性容器。

.container {
   display: flex;
   /* 可选：方向默认水平，设置为vertical for垂直 */
   flex-direction: column; /* 默认值，如果要水平排列则设为row */
}

2. **应用 Flex 基本属性**：
对于每个子元素（flex项），你可以设置它们如何在列上对齐。

.item {
   flex: 1; /* 自动分配空间，默认行为 */
   align-self: center; /* 设置内边距垂直居中，默认是stretch */
}

3. **控制主轴和侧轴**：
`align-items` 和 `justify-content` 分别负责控制行间和列间的对齐方式。

.container {
   align-items: flex-start | flex-end | center | baseline | stretch; /* 控制纵向对齐 */
   justify-content: flex-start | flex-end | center | space-between | space-around; /* 控制横向对齐 */
}