flex 最后一行左对齐

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 1000px;
        }

        .container {
            float: left;
            border: 1px solid #000;
            display: flex;
            width: 290px;
            flex-wrap: wrap;
            justify-content: space-between;
            resize: both;
        }

        .list {
            width: 65px;
            height: 65px;
            margin-bottom: 10px;
            background-color: rgb(148, 148, 131);
            margin-right: 10px;
        }

        .list:nth-child(4n) {
            margin-right: 0px;
        }

        .container::after {
            content: '';
            display: block;
            flex: 1;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
    </div>
    <div>
        切换子项目数量
        <select id="select">
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            </selction>
    </div>
    <script>
        let container = document.querySelector('.container');
        let box = document.querySelector('#select')

        box.onchange = (e) => {
            let len = e.target.value;
            // let html = Array.from({ length: len }, () => `<div class="list"></div>`).reduce((pre, item) => {
            //     return pre += item;
            // }, '');
            let html=''
            for (let index = 0; index < len; index++) {
               html+=`<div class="list"></div>`

            }
            container.innerHTML = html;
        }
    </script>

</body>

</html>
posted @   7c89  阅读(41)  评论(0编辑  收藏  举报
(评论功能已被禁用)
相关博文:
阅读排行:
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
· SQL Server 2025 AI相关能力初探
点击右上角即可分享
微信分享提示