flex box项目宽度缩小为文本

Question

此代码尝试缩小单选按钮标签，该标签是{＆lt; {3}}标记为＆＃34;黄色＆＃34;只是匹配无线电图标右侧的字符串。

目前的问题是span span`也是可点击的。

span' goes too close to the next radio icon that if the mobile user wanting to click the second icon could hit the first radio button by mistake since the

.radio-group {
    background-color: red;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row;
    -ms-flex-flow: row;
    flex-flow: row;
}

.radio-item {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row;
    -ms-flex-flow: row;
    flex-flow: row;
    align-items: baseline;
}

.radio-icon {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.radio-label {
    background-color: yellow;
    -webkit-flex: 15;
    -ms-flex: 15;
    flex: 15;
}

Answer 1

只需在radio-item上使用一些保证金，如下所示。

.radio-item {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row;
    -ms-flex-flow: row;
    flex-flow: row;
    align-items: baseline;
    margin-right:30px; /* add margin here */
}

.radio-group {
    background-color: red;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row;
    -ms-flex-flow: row;
    flex-flow: row;
}

.radio-item {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row;
    -ms-flex-flow: row;
    flex-flow: row;
    align-items: baseline;
    margin-right:30px;
}

.radio-icon {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.radio-label {
    background-color: yellow;
    -webkit-flex: 15;
    -ms-flex: 15;
    flex: 15;
}

<div name="radio">
  <div class="radio-group">
      <label class="radio-item">
        <input class="radio-icon" type="radio" name={{group}} checked={{value}} value={{name}}>
        <span class="radio-label">{{caption}}</span>
      </label>
      <label class="radio-item">
        <input class="radio-icon" type="radio" name={{group}} checked={{value}} value={{name}}>
        <span class="radio-label">{{caption}}</span>
      </label>
  </div>
</div>