无法让单选按钮包装在弹性容器中

Question

我有一组单选按钮，我想在 flex 容器内以类似网格的布局显示它们，但出于某种原因，我无法像所有其他元素一样让 flex 元素换行。这就是我希望它们看起来的样子（每个 X 是一个按钮，= 是空的 space）

X X X

X X X

X X X

X = X

但它们只是垂直列出。这是完整的代码： https://jsfiddle.net/wjseo8yz/1/

这是我的代码的简化通用版本。

.vert_flex {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.break {
  flex-basis: 100%;
}

<div class="vert_flex">
    <label>
        <input type="radio" id="squid_i" name="enemy_type">
        Squid I
    </label>

    <label>
        <input type="radio" id="squid_ii" name="enemy_type">
        Squid II
    </label>

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

    <label>
        <input type="radio" id="squid_iii" name="enemy_type">
        Squid III
    </label>

    <label>
        <input type="radio" id="leviathan" name="enemy_type">
        Leviathan
    </label>
</div>

所以在这个例子中，我希望按钮布局看起来像这样

X X

X X

但它垂直排列为

X

X

X

X

Answer 1

给每个 label 宽度的 1/3。然后简单地使用justif-content: space-between。 flex-direction: column 出于显而易见的原因，会将元素放在彼此下方。

.vert_flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

label{
  width: calc(100%/3);
}

<div class="vert_flex">
  <label>
    <input type="radio" id="squid_i" name="enemy_type">
      Squid I
  </label>

  <label>
    <input type="radio" id="squid_ii" name="enemy_type">
      Squid II
  </label>

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

  <label>
    <input type="radio" id="squid_iii" name="enemy_type">
      Squid III
  </label>

  <label>
    <input type="radio" id="leviathan" name="enemy_type">
      Leviathan
  </label>
  
  <label>
    <input type="radio" id="squid_i" name="enemy_type">
      Squid I
  </label>

  <label>
    <input type="radio" id="squid_ii" name="enemy_type">
      Squid II
  </label>

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

  <label>
    <input type="radio" id="squid_iii" name="enemy_type">
      Squid III
  </label>

  <label>
    <input type="radio" id="leviathan" name="enemy_type">
      Leviathan
  </label>
  
  <label>
    <input type="radio" id="squid_ii" name="enemy_type">
      Squid II
  </label>

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

  <label>
    <input type="radio" id="squid_iii" name="enemy_type">
      Squid III
  </label>

  <label>
    <input type="radio" id="leviathan" name="enemy_type">
      Leviathan
  </label>
</div>

无法让单选按钮包装在弹性容器中

Can't get radio buttons to wrap in a flex container

html

css

flexbox