如何实现div自动并排布局？单元素占满宽度，多元素均分

我希望在名为div_outside（注：原代码中容器实际ID为column_div，下文统一使用该容器）的容器中插入作为事件条目的div：

• 若容器中仅有一个条目，该div需占满100%宽度；
• 若存在相邻条目，所有条目应并排且尺寸相同。

当前代码无法实现该效果，现有代码如下：

原test.css #

.column_div{
    position: relative;
    width: 200px;
    height: 800px;
    margin-top: 20px;
    margin-left: 20px;
    border: solid black;
}   

.new_event1{
    position: relative;
    width: 100%;
    height: 30px;
    float: left;
    background-color: red;
}

.new_event2{
    position: relative;
    width: 100%;
    height: 30px;
    float: left;
    background-color: green;
}

原test.html #

<!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>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <div class="column_div" id="column_div"></div>

    <script src="test.js" defer></script>
</body>
</html>

原test.js #

column_div = document.getElementById("column_div")

new_event1 = document.createElement("div")
new_event1.classList.add("new_event1");

column_div.appendChild(new_event1)

new_event2 = document.createElement("div")
new_event2.classList.add("new_event2");

column_div.appendChild(new_event2)

使用CSS Flexbox布局可以轻松实现需求，无需JavaScript动态计算宽度，Flex会自动处理单/多子元素的宽度分配。

修改后的代码 #

test.css #

.column_div{
    position: relative;
    width: 200px;
    height: 800px;
    margin-top: 20px;
    margin-left: 20px;
    border: solid black;
    /* 启用Flex布局，子元素默认横向排列 */
    display: flex;
}   

/* 统一事件条目的基础样式，减少冗余 */
.event-item {
    height: 30px;
    /* 单个元素占满宽度，多个元素平分宽度 */
    flex: 1;
}

.new_event1{
    background-color: red;
}

.new_event2{
    background-color: green;
}

test.html #

<!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>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <div class="column_div" id="column_div"></div>

    <script src="test.js" defer></script>
</body>
</html>

test.js #

// 声明变量时使用const避免全局污染
const column_div = document.getElementById("column_div")

const new_event1 = document.createElement("div")
// 同时添加基础样式类和自定义背景色类
new_event1.classList.add("event-item", "new_event1");

column_div.appendChild(new_event1)

const new_event2 = document.createElement("div")
new_event2.classList.add("event-item", "new_event2");

column_div.appendChild(new_event2)

关键说明 #

• 容器添加display: flex后，子元素默认横向排列，无需使用float；
• flex: 1是核心属性：它会让每个子元素占据容器内的可用空间，单个元素时占满100%宽度，多个元素时自动平分宽度；
• 统一基础样式到.event-item类，避免重复编写相同的CSS属性，同时保留各自的自定义样式类（如背景色）。

内容的提问来源于stack exchange，提问作者Nils Schmidt