CSS如何优雅的实现卡片多行排列布局，HTML/Vue代码在线实时编辑、预览

HTML

格式化

支持Emmet，输入 p 后按 Tab键试试吧！

<head> ...

展开

</head>

<body>

            
                1
2
3
4
5
6
7
8
9
10

            
            <div class="card-content-box">
    <div class="container">
        <div class="crad">1</div>
        <div class="crad">2</div>
        <div class="crad">3</div>
        <div class="crad">4</div>
        <div class="crad">5</div>
        <div class="crad">6</div>
    </div>
</div>

编辑器加载中

</body>

Less

格式化

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

            
            .card-content-box {
    width: 100%;
    background: red;
    overflow: hidden;

    .container {
        width: calc(100%+ 16px );
        display: flex;
        align-content: space-between;
        flex-flow: wrap;

        .crad {
            height: 100px;
            background: yellow;
            width: 200px;
            margin:16px;
        }
    }
}

编辑器加载中

格式化

            
                1
2

            
            // 示例代码
console.log(["Hello 笔.COOL 控制台"])

编辑器加载中

预览

控制台

清空