html - 表单标签不会增长以填充 flexbox？

Question

我正在尝试制作我拥有的 2 个标签，填写 <div>有一个 width的 100% .

这些 labels与我在设置标签样式时隐藏的单选按钮相关联。我希望每个标签都填满 height 的 100%和 width 的 50%他们所在的 div，但似乎无法正常工作。

如果有另一种方法可以做到这一点，我也不会嫁给 flexbox。抱歉，我的 CSS 不够强大。

在下面的示例中，当单选按钮被选中时，我会看到一半的框是红色的，一半是蓝色的，没有绿色。

input[type="radio"] {
  position: absolute;
  left: -1000em;
}

input[type=radio]+label:before {
  cursor: pointer;
  background-color: red;
  flex: auto;
}

input[type=radio]:checked+label:before {
  background-color: blue;
}

.radio_container {
  height: 6rem;
  width: 100%;
  background-color: green;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

<div class="radio_container">
  <input type="radio" name="citizenship" placeholder="Citizenship" value="yes" id="citizenship1">
  <label for="citizenship1" value="yes">yes</label>
  <input type="radio" name="citizenship" placeholder="Citizenship" value="no" id="citizenship2">
  <label for="citizenship2" value="no">no</label>
</div>

Answer 1

这对你有用:

只需添加:

label{
  flex:1;
}

其余的 CSS 都很好，我还添加了 CSS 来对齐您的内容，如果您不想删除它就可以了。

下面为您提供的工作示例:

input[type="radio"] {
  position: absolute;
  left: -1000em;
}

input[type=radio]+label:before {
  cursor: pointer;
  background-color: red;
  flex: auto;
}

input[type=radio]:checked+label:before {
  background-color: blue;
}

.radio_container {
  height: 6rem;
  width: 100%;
  background-color: green;
  display: flex;
  flex-direction: row;
  text-align: center;/* To align the content horizontally center*/
  align-items:center;/* To align the content vertically center*/
}
label{
  flex:1;
  display:block;
}

<div class="radio_container">
  <input type="radio" name="citizenship" placeholder="Citizenship" value="yes" id="citizenship1">
  <label for="citizenship1" value="yes">yes</label>
  <input type="radio" name="citizenship" placeholder="Citizenship" value="no" id="citizenship2">
  <label for="citizenship2" value="no">no</label>
</div>

如果您想了解更多关于 flexbox 的信息，请访问此 link , 希望对您有所帮助。