首页flex布局一行两个,换行

flex布局一行两个,换行

时间: 2023-08-19 07:14:49 浏览: 438

在使用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 ]

阅读全文