横排超过换行最简单方式

好多吃的啊

于 2024-09-27 11:57:40 发布

阅读量80

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/m0_50080847/article/details/142590235

版权

文章目录

- - 期望结果
  - 页面布局

期望结果

在这里插入图片描述

页面布局

<div style="width: 540px; display: flex; align-items: flex-start; gap: 4px;flex-wrap: wrap;">
    <div style="width: 100px;height: 100px;background-color: pink;"></div>
    <div style="width: 100px;height: 100px;background-color: pink;"></div>
    <div style="width: 100px;height: 100px;background-color: pink;"></div>
    <div style="width: 100px;height: 100px;background-color: pink;"></div>
    <div style="width: 100px;height: 100px;background-color: pink;"></div>
    <div style="width: 100px;height: 100px;background-color: pink;"></div>
    <div style="width: 100px;height: 100px;background-color: pink;"></div>
    <div style="width: 100px;height: 100px;background-color: pink;"></div>
    <div style="width: 100px;height: 100px;background-color: pink;"></div>
    <div style="width: 100px;height: 100px;background-color: pink;"></div>
    <div style="width: 100px;height: 100px;background-color: pink;"></div>
    <div style="width: 100px;height: 100px;background-color: pink;"></div>
  </div>