フレックスボックスアイテムの幅がテキストに縮小されます

Question

このコードでは、ラジオボタンの右側にある文字列と一致するように、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; 
} 

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

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>