flex布局一行两个个div,宽度平分,如果有第四个div则换行显示,以此类推
时间: 2023-08-10 09:22:52 浏览: 59
可以使用flex布局实现这个需求,具体可以通过设置父元素的`display: flex; flex-wrap: wrap;`来让子元素自动换行。
具体的CSS代码如下:
```css
/* 父元素设置 */
.parent {
display: flex;
flex-wrap: wrap;
}
/* 子元素设置 */
.child {
width: calc(50% - 10px); /* 计算宽度平分,10px为两个子元素之间的间隔 */
margin-right: 10px; /* 设置子元素之间的间隔 */
margin-bottom: 10px; /* 设置子元素之间的间隔 */
}
/* 每行最后一个子元素设置 */
.child:last-child {
margin-right: 0;
}
```
当有第四个子元素时,它会自动换行显示,以此类推。
相关问题
flex布局一行三个div,宽度平分,如果有第四个div则换行显示,以此类推
您可以使用flex布局的方式来实现一行三个div,宽度平分的效果,并且当有第四个div时自动换行。示例代码如下:
HTML代码:
```
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
```
CSS代码:
```
.container {
display: flex;
flex-wrap: wrap;
}
.box {
flex-basis: calc(33.33% - 10px);
margin-right: 10px;
height: 100px;
background-color: #ccc;
margin-bottom: 10px;
}
.box:last-child {
margin-right: 0;
}
@media (max-width: 960px) {
.box {
flex-basis: calc(50% - 10px);
}
}
```
解释说明:
- 使用flex布局,container为父容器,box为子元素。
- 设置box的flex-basis为33.33%,即平分父容器的宽度,同时为了避免box之间的间距,设置margin-right: 10px。
- 当最后一个box时,将margin-right设置为0,以避免出现多余的空隙。
- 使用@media查询,当屏幕宽度小于960px时,将box的flex-basis设置为50%。
这样,当有第四个div时,会自动换行显示,以此类推。
flex布局一行两个,换行
在使用flex布局时,如果想要一行显示两个元素,并在超出容器宽度时自动换行,可以按照以下步骤进行设置。
首先,在外层容器上添加`flex-wrap: wrap;`属性,这样当元素超出容器宽度时就会自动换行。例如:
```css
.content {
display: flex;
flex-wrap: wrap;
}
```
然后,在内层元素上设置宽度,让其一行放不下,从而触发换行。可以使用百分比或者calc()函数来计算宽度。例如:
```css
.item {
width: 48%;
}
```
最后,根据需要调整元素之间的间距,可以使用`margin`属性来设置。例如:
```css
.item {
margin-right: 20px;
}
```
这样,当容器宽度不足以容纳两个元素时,它们就会自动换行显示。
#### 引用[.reference_title]
- *1* [display flex 弹性布局实现一行仅显示 2 个,每行显示指定个数(设置 space-between / space-around 超出...](https://blog.csdn.net/weixin_44198965/article/details/129022872)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [flex 布局 一行两个 超出自动换行](https://blog.csdn.net/q4717529/article/details/130217842)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]