I have a set of radio buttons that I want to display in a grid like layout inside of a flex container, but for some reason I can't get the flex element to wrap like all others do. This is kind of what I want them to look like (each X is a button, = is empty space)

X X X

X X X

X X X

X = X

But instead they just get listed out vertically. Here is the full code: https://jsfiddle.net/wjseo8yz/1/

Here's a shortened genericized version of my code.

.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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

So in this example I'd expect the button layout to look like this

X X

X X

but it gets laid out vertically as

X

X

X

X

CodePudding user response：

give every label a width of 1/3. Then simply use justif-content: space-between. flex-direction: column will put the elements below each other for obviose reasons.

.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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>