如何不使用<br>标签实现表单复选框的换行布局？

我在表单中添加了复选框组件，当前代码如下：

原CSS代码 #

input[type="checkbox"] {
  transform: scale(1.3);
  text-align: center;
  padding: 5px;
  display: inline;
}
div.checkbox label {
  display: inline;
  /* margin-left: .5rem; */
}

原HTML代码 #

<div class="checkbox">
    <h2>Choose your favorites programming languages (optional)</h2>
    <input type="checkbox" name="js" id="js" value="JavaScript"/>
    <label for="js">JavaScript</label> <br>
    <input type="checkbox" name="python" id="python" value="Python"/>
    <label for="python">Python</label> <br>
    <input type="checkbox" name="java" id="java" value="Java"/>
    <label for="java">Java</label> <br>
    <input type="checkbox" name="c" id="c" value="C"/>
    <label for="c">C</label> <br>
    <input type="checkbox" name="c++" id="c++" value="C++"/>
    <label for="c++">C++</label> <br>
    <input type="checkbox" name="c#" id="c#" value="C#"/>
    <label for="c#">C#</label> <br>
    <input type="checkbox" name="php" id="php" value="PHP"/>
    <label for="php">PHP</label> <br>
</div>

目前通过<br>标签实现每个复选框选项的换行效果，希望不使用<br>标签，仅通过CSS实现相同布局。

第一步：移除HTML中的所有<br>标签 #

先把所有<br>删掉，得到干净的结构：

<div class="checkbox">
    <h2>Choose your favorites programming languages (optional)</h2>
    <input type="checkbox" name="js" id="js" value="JavaScript"/>
    <label for="js">JavaScript</label>
    <input type="checkbox" name="python" id="python" value="Python"/>
    <label for="python">Python</label>
    <input type="checkbox" name="java" id="java" value="Java"/>
    <label for="java">Java</label>
    <input type="checkbox" name="c" id="c" value="C"/>
    <label for="c">C</label>
    <input type="checkbox" name="c++" id="c++" value="C++"/>
    <label for="c++">C++</label>
    <input type="checkbox" name="c#" id="c#" value="C#"/>
    <label for="c#">C#</label>
    <input type="checkbox" name="php" id="php" value="PHP"/>
    <label for="php">PHP</label>
</div>

第二步：用CSS实现换行（两种可选方法） #

方法一：利用块级元素特性（简单直接）

把每个标签设置为块级元素，这样每个标签会独占一行，连带前面的复选框一起换行：

input[type="checkbox"] {
  transform: scale(1.3);
  text-align: center;
  padding: 5px;
}
div.checkbox label {
  display: block; /* 标签变为块级元素，自动换行 */
  margin-left: .5rem; /* 取消注释，给复选框和标签加间距更美观 */
}

方法二：Flex布局（更灵活易扩展）

给容器设置垂直方向的Flex布局，既能实现换行，还能轻松控制选项间距、对齐方式：

div.checkbox {
  display: flex;
  flex-direction: column; /* 子元素垂直排列 */
  gap: 10px; /* 可选：设置每个选项之间的间距 */
}
div.checkbox h2 {
  margin-bottom: 15px; /* 给标题和选项之间加间距 */
}
input[type="checkbox"] {
  transform: scale(1.3);
  text-align: center;
  padding: 5px;
}
div.checkbox label {
  margin-left: .5rem; /* 保持复选框和标签的间距 */
}

两种方法都能实现和原<br>标签一样的换行效果，Flex布局在后续需要调整布局（比如响应式排列）时会更方便。

内容的提问来源于stack exchange，提问作者Enmanuel De Los Santos Cruz