display: flex; }
时间: 2024-07-25 12:01:37 浏览: 244
CSS中display flex整理(布局利器)
5星 · 资源好评率100%
`display: flex;` 是CSS用于创建弹性布局(flexbox)的一种方式,它允许元素在容器内灵活地排列和对齐。以下是关于这个属性的一些详细信息:
1. **基础概念**[^1]:
- `display: flex;` 会将元素转换为 Flex 容器,其子元素自动成为 Flex 项目。
- 它改变了元素的默认流布局模式,使元素可以沿着主轴(通常是水平方向)灵活伸缩。
2. **对齐方式**:
- `align-self: auto;` 会让项目继承容器的对齐方式,默认情况下是`stretch`,即拉伸以填充可用空间。
- `-start` 对齐到容器的起始位置,
- `-end` 对齐到容器的结束位置,
- `center` 居中对齐,
- `baseline` 与同基线的元素对齐,
- `stretch` 拉伸项目以填满剩余空间。
3. **换行行为**:
- `flex-wrap: nowrap;` 不换行,项目按顺序排列。
- `wrap;` 当项目的总宽度大于容器时,换行显示。
- `wrap-reverse;` 和 `wrap` 类似,但新行从容器的末尾开始。
- `initial` 或 `inherit` 表示使用浏览器默认值。
要应用这些样式,你可以这样设置HTML和CSS:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: flex;
justify-content: space-between; /* 主轴对齐方式 */
}
.item {
width: 100px;
height: 100px;
background-color: lightblue;
align-self: center; /* 项目自定义对齐方式 */
}
/* 或者控制换行行为 */
.items-wrap {
flex-wrap: wrap;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<!-- 更多项目 -->
</div>
<div class="items-wrap">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<!-- ... -->
</div>
</body>
</html>
```
阅读全文