flex布局的 alignItems属性
时间: 2024-05-14 11:11:10 浏览: 18
flex布局的alignItems属性定义了项目在交叉轴上如何对齐。该属性可以使用以下五个值:flex-start、flex-end、center、baseline和stretch。具体解释如下[^1]:
- flex-start: 项目在交叉轴上与容器的起点对齐。
- flex-end: 项目在交叉轴上与容器的终点对齐。
- center: 项目在交叉轴上居中对齐。
- baseline: 项目在交叉轴上以它们的基线对齐。
- stretch: 默认值,如果项目没有设置高度或设为auto,将占满整个容器的高度。
以下是一个使用alignItems属性的例子:
```html
<style>
.container {
display: flex;
height: 200px;
align-items: center;
background-color: #f1f1f1;
}
.item {
width: 100px;
height: 50px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 50px;
margin-right: 10px;
}
</style>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
```
使用alignItems属性将项目在交叉轴上居中对齐。具体运行效果可以查看这个链接[^2]。
相关推荐
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![application/x-zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)