Flexbox布局流动不符合预期 内部单选按钮排列顺序异常

• 包裹单选按钮的#example_input容器未开启Flex布局，默认按普通文档流排列：行内元素从左到右依次排列，遇到块级的.break元素才换行，所以先横向排列Option1、Option2，换行后再排列Option3、Option4，和预期的先列后行排列逻辑不符。
• 你需要的「先列后行、两列布局」效果，要求容器同时满足flex-direction: column、flex-wrap: wrap、固定高度三个条件，才能让内容排满一列后自动换到下一列，现有配置未满足以上要求。

1. 给#example_input容器添加vert_flex类，开启列方向Flex布局，复用已定义的flex-wrap: wrap规则
2. 给#example_input设置固定高度，高度值只要刚好能容纳2个单选标签即可，保证第一列放满2个选项后自动换到第二列
3. 删除#example_input内部多余的.break换行元素，无需手动控制换行

修改后的代码示例 #

HTML 部分 #

<!DOCTYPE html>
<meta charset="UTF-8"> 
<html>
    <body>
        <div id="spawns" class="vert_flex">
            <p>
              A place holder for something else in my project
            </p>

            <div class="break"></div>

            <div id="example_input" class="vert_flex">
                <label>
                    <input type="radio" name="radio_example">
                    Option 1
                </label>

                <label>
                    <input type="radio" name="radio_example">
                    Option 2
                </label>

                <label>
                    <input type="radio" name="radio_example">
                    Option 3
                </label>

                <label>
                    <input type="radio" name="radio_example">
                    Option 4
                </label>
            </div>
        </div>
    </body>
</html>

新增CSS规则 #

#example_input {
    height: 80px; /* 可根据实际label的行高、边距调整，只要能放下2个选项即可 */
}

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