以下是一个不使用填充和边距的示例代码,实现垂直对齐且伸展的弹性布局:
HTML代码:
Item 1
Item 2
Item 3
CSS代码:
.container {
display: flex;
flex-direction: column;
align-items: flex-start;
height: 100vh; /* 设置容器的高度 */
border: 1px solid black; /* 可选:用于显示容器的边框 */
}
.item {
flex: 1; /* 设置每个项目的伸展比例 */
align-self: stretch; /* 设置每个项目垂直伸展 */
}
上述代码中,.container
类是一个包含了三个项目的父容器。我们将其设置为display: flex
以启用弹性布局。flex-direction: column
表示项目按垂直方向排列。
.item
类定义了项目的样式。flex: 1
将项目的伸展比例设置为相等,以便它们平均占据可用空间。align-self: stretch
将每个项目垂直伸展,使其填充整个父容器的高度。
使用上述代码,您可以实现一个垂直对齐且伸展的弹性布局,而不使用填充和边距。