html - 使用显示 : flex; 等距元素

Question

我正在尝试使用 Flexbox 来完成我目前正在做的一些 UI 工作。我有一组选择框，我用一些基本的 CSS 设计了样式。我要问你的问题是，我如何才能在不让一两个设备看起来彼此靠得太近的情况下将这些设备均匀地隔开？

#device-select {
    background: #2d2d2d;
    border-radius: 8px;
    width: 250px;
    display: flex;
    padding: 20px;
}
.rad, .ckb {
    cursor:pointer;
    flex: 1;
    text-align: center;
    color: white;
}
.rad > input, .ckb > input {
    /* Hide original radio and checkboxes */
    visibility: hidden;
    position: absolute;
}
.rad > i {
    font-size: 64px;
    color: #fff;
}
.rad:hover > i {
    /* HOVER <i> STYLE */
    color: wheat;
}
.rad > input:checked + i {
    color: purple;
}

<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="device-select">
    <label class="rad">
        <input type="radio" name="device-choice" value="desktop" /> <i class="fa fa-desktop"></i>
Desktop</label>
    <label class="rad">
        <input type="radio" name="device-choice" value="tablet" /> <i class="fa fa-tablet"></i>
Tablet</label>
    <label class="rad">
        <input type="radio" name="device-choice" value="mobile" /> <i class="fa fa-mobile"></i>
Mobile</label>
</div>

Answer 1

请从 .rad, .ckb 中删除 flex: 1;

新代码应该是

.rad, .ckb {
    cursor:pointer;    
    text-align: center;
    color: white;
}