使用display：flex时，如何水平对齐一组单选按钮（和标签）：flex将它们并排堆叠

Question

我已使用display:flex来设置多个单选按钮的样式，以便它们并排显示，而不是一长列。我认为通过将margin:auto与此结合使用，子元素将显示为分组，但在页面的中心水平。显然情况并非如此，所以任何帮助，将不胜感激请。

这是我目前有：

input[type="radio"] { 
 
    display: none; 
 
} 
 
input[type="radio"]:checked + label { 
 
    background-color: red; 
 
    display: inline-block; 
 
    line-height: 4vw; 
 
    text-align: center; 
 
    width: 18vw; 
 
} 
 
label { 
 
    background-color: orange; 
 
    display: inline-block; 
 
    line-height: 4vw; 
 
    color: white; 
 
    text-align: center; 
 
    width: 18vw; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<section style="display:flex; margin:auto;"> 
 
    <div> 
 
     <p>Amount:</p> 
 
     </br> 
 
     <input type="radio" name="Amount" id="Amount1" value="single"/checked> 
 
     <label for="Amount1">Amount 1</label> 
 
     </br> 
 
     </br> 
 
     <input type="radio" name="Amount" id="Amount2" value="multi" /> 
 
     <label for="Amount2">Amount 2</label> 
 
    </div> 
 
    <span style="width:5vw;display:inline-block"></span> 
 
    <div> 
 
     <p>Term:</p> 
 
     </br> 
 
     <input type="radio" name="Term" id="Term1" value="0"/checked> 
 
     <label for="Term1">Term 1</label> 
 
     </br> 
 
     </br> 
 
     <input type="radio" name="Term" id="Term2" value="1" /> 
 
     <label for="Term2">Term 2</label> 
 
    </div> 
 
    <span style="width:5vw;display:inline-block"></span> 
 
    <div> 
 
     <p>Phone:</p> 
 
     </br> 
 
     <input type="radio" name="Phone" id="Phone1" value="0"/checked> 
 
     <label for="Phone1">Phone 1</label> 
 
     </br> 
 
     </br> 
 
     <input type="radio" name="Phone" id="Phone2" value="1" /> 
 
     <label for="Phone2">Phone 2</label> 
 
    </div> 
 
</section>

我已经使用宽视整个项目，因为我有进一步的CSS样式改变基于媒体查询元素大小。所以我需要一个解决方案，如果可能的话，仍然保持这种风格。

Answer 1

使用以下应该有所帮助：

justify-content: center 

在display:flex类。

来源：https://css-tricks.com/snippets/css/a-guide-to-flexbox/