在Flex容器中排列表单元素

Question

我正在使用flex布局并尝试获得所需的布局，如下面的img所示：但我无法正确使用它。这是我的fiddle。

＆＃13;

＆＃13;

.form-block .form-group {
  display: flex;
}
.form-block .form-group label:first-child {
  float: left;
}
.form-block .form-group .checkbox {
  display: block;
  flex-flow: column wrap;
}

＆＃13;

<section class="form-block">
  <label>Static Checkboxes</label>
  <div class="form-group">
    <label>Default/Stacked checkbox group</label>
    <div class="checkbox">
      <input id="checkrads_1" type="checkbox">
      <label for="checkrads_1">Checkbox 1</label>
    </div>
    <div class="checkbox">
      <input checked="" id="checkrads_2" type="checkbox">
      <label for="checkrads_2">Checkbox 2</label>
    </div>
    <div class="checkbox disabled">
      <input disabled="" id="checkrads_3" type="checkbox">
      <label for="checkrads_3">A disabled and unchecked checkbox</label>
    </div>
    <div class="checkbox disabled">
      <input checked="" disabled="" id="checkrads_4" type="checkbox">
      <label for="checkrads_4">A disabled and checked checkbox</label>
    </div>
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;

Answer 1

＆＃13;

＆＃13;

.form-block {
  display: flex;
  flex-wrap: wrap;
}

.form-block>label {
  flex: 0 0 100%;
}

.form-group {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.form-group>label {
  flex: 0 0 100%;
}

＆＃13;

<section class="form-block">
  <label>Static Checkboxes</label>
  <div class="form-group">
    <label>Default/Stacked checkbox group</label>
    <div class="checkbox">
      <input id="checkrads_1" type="checkbox">
      <label for="checkrads_1">Checkbox 1</label>
    </div>
    <div class="checkbox">
      <input checked="" id="checkrads_2" type="checkbox">
      <label for="checkrads_2">Checkbox 2</label>
    </div>
    <div class="checkbox disabled">
      <input disabled="" id="checkrads_3" type="checkbox">
      <label for="checkrads_3">A disabled and unchecked checkbox</label>
    </div>
    <div class="checkbox disabled">
      <input checked="" disabled="" id="checkrads_4" type="checkbox">
      <label for="checkrads_4">A disabled and checked checkbox</label>
    </div>
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;

jsFiddle