垂直元素均匀分布

最新推荐文章于 2025-12-20 20:37:31 发布

原创最新推荐文章于 2025-12-20 20:37:31 发布 · 207 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

CSS 专栏收录该内容

10 篇文章

订阅专栏

实现垂直元素的均匀分布，如果只有一个元素则在最上方。
主要使用flex:1使空间均分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Equal Width Divs</title>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            justify-content: space-between; /* 可选：在子元素之间添加间距 */
            gap: 10px; /* 可选：在子元素之间添加固定间距 */
        }

        .container > div {
            flex: 1; /* 每个子元素平摊可用空间 */
            padding: 20px;
            background-color: lightblue;
            text-align: center;
        }
    </style>
</head>
<body>

<div class="container">
    <div>Div 1</div>
    <div>Div 2</div>
    <div>Div 3</div>
    <div>Div 4</div>
</div>

</body>
</html>