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

Question

我有一个看起来像这样的盒子的柔性盒排。

我想喜欢这种风格的单选按钮，使他们可以进行检查。 这可能吗？

<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

没错。隐藏输入并使用for属性将其附加到label，然后样式为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>