时间戳

首页 > 解决方案 > Flexbox 没有按预期流动

html - Flexbox 没有按预期流动

问题描述

我无法让弹性框按预期运行。在我的情况下，body 是一个行 flexbox，其中包含一个 div，它是一个列 flexbox。列弹性框内部是单选按钮，但出于某种原因，它们以行而不是列的形式流动。我期望看到的是

选项 1 选项 3

选项 2 选项 4

我得到的是

选项 1 选项 2

选项 3 选项 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>

标签： htmlcssflexbox

解决方案

您需要修改代码以确保内部内容example_input使用 flex。默认情况下，example_inputdiv 是显示块，并且在您的原始代码中没有修改

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>

推荐阅读