要使用 CSS 制作并列布局,我们可以使用 "display: flex" 属性。这个属性可以将元素放置在一个水平或垂直的轴上,并让它们具有弹性,以适应不同的屏幕尺寸和设备。
下面是一个简单的示例代码:
.container {
display: flex;
}
.item {
flex: 1;
}
在这个例子中,我们使用了 "display: flex" 属性来创建一个容器,它将其子元素放置在一行上。然后,我们使用 "flex: 1" 属性来指定子元素的比例,以便它们可以平均分配容器的宽度。
要创建一个垂直的并列布局,我们可以将 "flex-direction" 属性设置为 "column",如下所示:
.container {
display: flex;
flex-direction: column;
}
.item {
flex: 1;
}
在这个例子中,我们使用了 "flex-direction: column" 属性来创建一个垂直的布局。然后,我们使用 "flex: 1" 属性来指定子元素的比例,以便它们可以平均分配容器的高度。
总之,使用 "display: flex" 属性和 "flex" 属性可以轻松创建并列布局。