display: flex;
时间: 2023-09-11 15:09:54 浏览: 18
display: flex弹性布局
5星 · 资源好评率100%
这是一个 CSS 属性,用于设置一个元素的布局方式为弹性布局。它可以让元素的子元素自适应布局,实现响应式设计。具体用法可以参考以下示例:
```
.container {
display: flex;
flex-direction: row; /* 设置主轴方向为水平方向 */
justify-content: center; /* 设置子元素在主轴方向上的对齐方式为居中 */
align-items: center; /* 设置子元素在交叉轴方向上的对齐方式为居中 */
}
.item {
flex: 1; /* 设置子元素占据剩余空间 */
}
```
在上述示例中,`.container` 是一个弹性容器,它的子元素`.item`会根据`flex`属性自动适应布局,并且在主轴和交叉轴方向上居中对齐。
阅读全文