Flexbox not flowing as expected-CodePudding

I'm having trouble getting a flex box to behave as expected. The body in my situation is a row flexbox, within it is contained a div that is a column flexbox. Inside the column flexbox are radio buttons, yet for some reason they flow in rows rather than columns. What I expect to see is

Option 1 Option 3

Option 2 Option 4

What I get is

Option 1 Option 2

Option 3 Option 4

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.horz_flex, .vert_flex {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    align-items: center;
    justify-content: space-evenly;
}

.horz_flex {
    flex-direction: row;
}

.vert_flex {
    flex-direction: column;
}

.break {
    flex-basis: 100%;
}

<!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">
                <label>
                    <input type="radio" name="radio_example">
                    Option 1
                </label>

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

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

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

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

CodePudding user response：

You would need to modify your code to make sure the inner content of example_input is using flex. The example_input div is display block by default and this was not modified in your original code

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.horz_flex,
.vert_flex {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  align-items: center;
  justify-content: space-evenly;
}

.horz_flex {
  flex-direction: row;
}

.vert_flex {
  flex-direction: column;
}

.break {
  flex-basis: 100%;
}

<!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="horz_flex">
      <div class="vert_flex">
        <label>
                    <input type="radio" name="radio_example">
                    Option 1
                </label>

        <label>
                    <input type="radio" name="radio_example">
                    Option 2
                </label>
      </div>
      <div class="vert_flex">
        <label>
                    <input type="radio" name="radio_example">
                    Option 3
                </label>

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

</html>

CodePudding user response：

Swap option 3 and 2.

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

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

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

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

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

Check out here .