flex布局移到底部
时间: 2023-08-16 22:15:05 浏览: 96
footer 贴在底部的布局实现代码
要将Flex布局中的内容移到底部,你可以使用Flexbox中的`align-items`属性。将`align-items`属性的值设置为`flex-end`,即可将内容垂直对齐到容器的底部。
以下是一个示例代码:
```html
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
```
```css
.container {
display: flex;
flex-direction: column;
align-items: flex-end;
height: 200px; /* 设置容器的高度,以便内容可以垂直对齐到底部 */
}
.item {
width: 100px;
height: 50px;
background-color: #ccc;
margin-bottom: 10px;
}
```
在上面的示例中,通过将容器的`align-items`属性设置为`flex-end`,内容将会垂直对齐到容器的底部。请注意,为了使内容能够垂直对齐到底部,容器必须具有一定的高度。
阅读全文