两个并排的行内元素使用flex布局自动换行

导读

Css练习中遇到单选按钮组使用flex布局完成了换行，于是写了小demo发现两个并排的行内元素使用flex布局会自动换行

Html

<span class="big">
        <span class="small"></span>
        <span class="small"></span>
        <span class="small"></span>
    </span>

    <span class="big">
        <span class="small"></span>
        <span class="small"></span>
        <span class="small"></span>
    </span>

Css

span{
            display: inline-block;

        }
        .big{
            /* display: flex; */
            width: 750px;
            height: 200px;
            background-color: blue;
            margin-top: 10px;
        }
        .small{
            width: 200px;
            height: 100px;
            background-color: rgb(18, 194, 76);
        }

未使用flex布局

使用flex布局

可见可以使用flex布局使两个并排的行内元素换行

单选按钮组使用

Html

<label><input type="radio" name="user-recommend" class="input-radio" checkedvalue="definitely">Definitely</label>
<label><input type="radio" name="user-recommend" class="input-radio" value="maybe">Maybe</label>```

Css

label {
    display: flex;
    align-items: center;
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
  }

效果