弹性布局两对齐给出代码
时间: 2024-06-19 12:03:08 浏览: 2
弹性布局是一种常用的前端布局方式,其中的两对齐指的是水平和垂直方向上的对齐。以下是一个简单的弹性布局的代码示例,其中包括了两对齐的实现:
```
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.item {
width: 30%;
margin-bottom: 20px;
background-color: #f2f2f2;
text-align: center;
padding: 10px;
box-sizing: border-box;
}
</style>
```
在上述代码中,我们使用了`display: flex`来声明了一个弹性容器。通过设置`flex-wrap`属性为`wrap`,我们可以让子元素自动换行。而通过`justify-content`属性设置为`space-between`,我们可以使得子元素在水平方向上两对齐,即两端对齐。最后,通过设置`align-items`属性为`center`,我们可以使得子元素在垂直方向上两对齐,即居中对齐。