农药君 2024-06-19 22:33 采纳率: 100%
浏览 6
已结题

怎样用css让子元素在父元素中向左分散对齐

怎么用css做到下面这两张图的效果

img

img

用语言描述就是，子元素拥有固定宽度，在父元素中分散对齐，如果对齐后出现父元素装不下的情况，那么子元素会换行。不满一行的，按照装满一行时分散对齐的列向左对齐
我描述的可能不是很准确，看图可能会更加能够理解一些我因为不会，所以只能先暂时用svg画一个效果预览图

  • 写回答

2条回答 默认 最新

  • 农药君 2024-06-21 21:39
    关注

    最后我实际使用的是Grid布局，代码如下

    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
    <style>
        .flex {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); /* '1fr' 表示可用空间的一个分数，这里用作列宽的最大值 */
            grid-auto-rows: auto; /* 自动调整行高以适应内容 */
            gap: 5px; /* 列和行之间的间隙 */
            border: 1px solid #f00;
        }

        .flex > .item {
            justify-self: center;
            height: 200px; /* 可选，用于可视化子元素高度 */
            width: 130px;
            background-color: #0f0; /* 可选，用于可视化子元素背景 */
            margin-bottom: 10px; /* 子元素底部间距 */
            border: 2px solid #000;
        }
    </style>
</head>
<body>
    <div class="flex">
        <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 class="item"></div>
        <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 class="item"></div>
        <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 class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>

    效果如下：

    img

    img

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 6月29日
  • 已采纳回答 6月21日
  • 创建了问题 6月19日

悬赏问题

  • ¥15 找一个QT页面+目标识别（行人检测）的开源项目
  • ¥15 有没有整苹果智能分拣线上图像数据
  • ¥20 有没有人会这个东西的
  • ¥15 cfx考虑调整“enforce system memory limit”参数的设置
  • ¥30 航迹分离，航迹增强，误差分析
  • ¥15 Chrome Manifest扩展引用Ajax-hook库拦截请求失败
  • ¥15 用Ros中的Topic通讯方式控制小乌龟的速度，走矩形；编写订阅器代码
  • ¥15 LLM accuracy检测
  • ¥15 pycharm添加远程解释器报错
  • ¥15 如何让子窗口鼠标滚动独立，不要传递消息给主窗口