使用纯 html 和css 垂直拆分区域

在研究 Ant Design Vue 这些 UI 框架之前，打好 html 和 css 的基础还是很重要的，尤其是 css，不让出问题都不知道怎么排查

「使用纯 html 和css 垂直拆分区域」这个需求怎么实现?

用下面的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Equivalent HTML</title>
    <style>
        .section,
        .section-light,
        .section-dark,
        .section-gray {
            display: flex;
            padding: 8px;
        }

        .section > div,
        .section-light > div,
        .section-dark > div,
        .section-gray > div {
            padding: 8px;
            border: 1px solid #000;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="section" style="display: flex; flex-wrap: wrap;">
        <div style="flex: 0 0 100%; max-width: 100%;">
            col
        </div>
    </div>
    <div class="section-light" style="display: flex; flex-wrap: wrap;">
        <div style="flex: 0 0 50%; max-width: 50%;">
            col-12
        </div>
        <div style="flex: 0 0 50%; max-width: 50%;">
            col-12
        </div>
    </div>
    <div class="section-dark" style="display: flex; flex-wrap: wrap;">
        <div style="flex: 0 0 33.333%; max-width: 33.333%;">
            col-8
        </div>
        <div style="flex: 0 0 33.333%; max-width: 33.333%;">
            col-8
        </div>
        <div style="flex: 0 0 33.333%; max-width: 33.333%;">
            col-8
        </div>
    </div>
    <div class="section-gray" style="display: flex; flex-wrap: wrap;">
        <div style="flex: 0 0 25%; max-width: 25%;">
            col-6
        </div>
        <div style="flex: 0 0 25%; max-width: 25%;">
            col-6
        </div>
        <div style="flex: 0 0 25%; max-width: 25%;">
            col-6
        </div>
        <div style="flex: 0 0 25%; max-width: 25%;">
            col-6
        </div>
    </div>
</body>
</html>

渲染效果如下：

图片.png

对应的 vue+Ant Design Vue 代码就是

<template>
    <a-row class="section">
        <a-col :span="24">col</a-col>
    </a-row>
    <a-row class="section-light">
        <a-col :span="12">col-12</a-col>
        <a-col :span="12">col-12</a-col>
    </a-row>
    <a-row class="section-dark">
        <a-col :span="8">col-8</a-col>
        <a-col :span="8">col-8</a-col>
        <a-col :span="8">col-8</a-col>
    </a-row>
    <a-row class="section-gray">
        <a-col :span="6">col-6</a-col>
        <a-col :span="6">col-6</a-col>
        <a-col :span="6">col-6</a-col>
        <a-col :span="6">col-6</a-col>
    </a-row>
</template>

<style>
.section {
    background-color: #f0f0f0;
}

.section-light {
    background-color: #d3d3d3;
}

.section-dark {
    background-color: #a9a9a9;
}

.section-gray {
    background-color: #808080;
}
</style>

图片.png

可以看到，Ant Design Vue 用的也是 flex 的方案

图片.png

使用纯 html 和css 垂直拆分区域

universe_king

引用和评论

fastapi 的 typer 会是 click 项目的优秀替代品吗？

CSS团队协作规范

100个React最佳实践小技巧

前端开发工具

开发插件集合

Javascript(turfjs)等值线图绘制

JS校验身份证号