如何將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>