flex布局固定一行3个元素,超过三个自动换行
时间: 2023-07-28 14:25:18 浏览: 203
可以使用 Flex 布局中的 `flex-wrap` 属性来实现这个效果。具体实现如下:
HTML 代码:
```
<div class="container">
<div class="item">元素 1</div>
<div class="item">元素 2</div>
<div class="item">元素 3</div>
<div class="item">元素 4</div>
<div class="item">元素 5</div>
<div class="item">元素 6</div>
<div class="item">元素 7</div>
<div class="item">元素 8</div>
<div class="item">元素 9</div>
</div>
```
CSS 代码:
```
.container {
display: flex;
flex-wrap: wrap;
}
.item {
width: calc(33.33% - 10px);
margin-right: 10px;
margin-bottom: 10px;
background-color: #f2f2f2;
padding: 20px;
box-sizing: border-box;
}
.item:nth-child(3n) {
margin-right: 0;
}
@media screen and (max-width: 768px) {
.item {
width: 100%;
margin-right: 0;
}
}
```
解释:
1. `.container` 使用 `display: flex` 属性使其成为 Flex 容器。
2. `.container` 使用 `flex-wrap: wrap` 属性将超出行宽的元素自动换行。
3. `.item` 使用 `width: calc(33.33% - 10px)` 属性将其宽度设为 33.33%,并减去 10px 的右边距,保证三个元素占满一行。
4. `.item:nth-child(3n)` 使用 `margin-right: 0` 属性将第三个元素的右边距设置为 0,使其占满一行。
5. 使用媒体查询(`@media`)和 `width: 100%` 属性,当屏幕宽度小于 768px 时,将每个元素的宽度设置为 100%,让它们在一行内排列。