如何将flexbox样式应用于单选按钮？

Question

我有一个带有框的Flexbox行,看起来像这样.

我想像这样设置单选按钮,以便检查它们.这可能吗？

<ul class="flex-container longhand">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
</ul>

CSS

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
}

.longhand {
  flex-flow: wrap row;
}

.flex-item {
  color: #C3D0D9;
  border: 1px solid #C3D0D9;
  width: 50px;
  height: 50px;
  font-size: 1.3em;
  text-align: center;
  padding: 10px;
}

Answer 1

是的.隐藏输入并label使用该for属性将其附加到a ,然后设置样式label.

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
}
.longhand {
  flex-flow: wrap row;
}
.flex-item {
  color: #C3D0D9;
  border: 1px solid #C3D0D9;
  width: 50px;
  height: 50px;
  font-size: 1.3em;
  text-align: center;
  padding: 10px;
}
label {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
input:checked + label {
  background: #eee;
}
input {
  display: none;
}

<ul class="flex-container longhand">
  <li class="flex-item"><input id="radio1" type="radio" name="radio"><label for="radio1">1</label></li>
  <li class="flex-item"><input id="radio2" type="radio" name="radio"><label for="radio2">2</label></li>
  <li class="flex-item"><input id="radio3" type="radio" name="radio"><label for="radio3">3</label></li>
  <li class="flex-item"><input id="radio4" type="radio" name="radio"><label for="radio4">4</label></li>
  <li class="flex-item"><input id="radio5" type="radio" name="radio"><label for="radio5">5</label></li>
</ul>