要实现
flex布局的两
行三列，你可以使用以下代码：
```
html
<style>
.container {
display:
flex;
flex-flow: row wrap;
height: 400px;
}
.item {
flex: 0 0 calc(33.33% - 10px);
height: 200px;
margin: 5px;
background-color: #ccc;
}
</style>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
```
这段代码中，我们使用了一个容器元素`<div class="container">`来包含六个子元素`<div class="item">`。通过设置`display:
flex`可以使容器元素变成一个弹性容器，`
flex-flow: row wrap`可以设置子元素按
行排
列，并自动换
行。每个子元素的`
flex`属性设置为`0 0 calc(33.33% - 10px)`，表示宽度占比为33.33%，并且不允许缩放和自动填充剩余空间。最后通过设置`margin`属性来控制子元素之间的间距。这样就实现了一个两
行三列的
flex布局。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [
flex两
列布局 以及
三列布局](https://blog.csdn.net/zw_studing/article/details/108630799)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [
Flex布局](https://download.csdn.net/download/weixin_38610870/16215679)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [双飞燕
布局、圣杯
布局、
flex布局实现
三列布局（两边固定中间自适应）](https://blog.csdn.net/qq_44742090/article/details/123188562)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]
2077
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
