问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

关于css3 flex布局的问题

头像
杯具的小男孩
    13616

    snipaste_20191010_115328.jpg
    flex布局 所有盒子是 flex：1
    想让CU016这个盒子不占全部 和其他一样宽并且留白
    盒子宽度随着屏幕大小变宽
    有办法解决吗

    csshtml5javascripthtmlsass
    阅读 2.2k
    2 个回答
    得票最新
    头像
    牛书书
      10.1k72035
      ✓ 已被采纳

      子级盒子设置内容宽度了吧 不然CU014和其它的盒子宽度不一样的。

      思路：在最后添加几个占位空白盒子（个数为一行最多展示的个数以上），高度是0.

      示例
      image.png

      头像
      T_one
        1.3k41531

        写了个demo，这是效果图，还有优化的空间
        WX20191010-140701.png

        <!DOCTYPE html>
<html lang="en">

<head>
    <style>
        ul,
        li,
        p {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }
        ul {
            width: 400px;
            border: 1px solid red;
            display: flex;
            flex-wrap: wrap;
            padding: 10px;
            box-sizing: border-box;
        }

        ul li {
            width: 33.3%;
            height: 200px;
            line-height: 200px;
            font-size: 20px;
            text-align: center;
            color: #fff;
            padding-right: 5px;
            margin-bottom: 5px;
            box-sizing: border-box;
            overflow: hidden;
        }
        p{
            background: lightseagreen;
        }

        ul li:nth-child(3n) {
            padding-right: 0;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <p>1</p>
        </li>
        <li>
            <p>2</p>
        </li>
        <li>
            <p>3</p>
        </li>
        <li>
            <p>4</p>
        </li>
        <li>
            <p>5</p>
        </li>
        <li>
            <p>6</p>
        </li>
        <li>
            <p>7</p>
        </li>
    </ul>
</body>

</html>
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题