在 flexbox 中垂直和水平均匀对齐单选按钮答案

【问题标题】：evenly align radio buttons vertically and horizontally in flexbox在 flexbox 中垂直和水平均匀对齐单选按钮
【发布时间】：2020-08-18 08:22:07
【问题描述】：

我正在尝试垂直和水平对齐 flexbox 中的单选按钮。这是我到目前为止所做的，按钮没有正确对齐。以下是我的代码：

<div class="d-flex flex-column justify-content-between">
  <div class="navlist">
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">XXXX</label><br>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">XXXXX</label><br>
    <input type="radio" id="other" name="gender" value="other">
    <label for="other">XXXXX</label>

  </div>

  <div class="navlist">
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">XXXXXXXX</label><br>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">YYYYYYYYYYYYY</label><br>
    <input type="radio" id="other" name="gender" value="other">
    <label for="other">PPPPPPPPPPP</label>

  </div>
</div>

这就是它的样子：

【问题讨论】：

标签： bootstrap-4 flexbox

【解决方案1】：

你想做什么？ 2列3行还是2行3列？

我假设有 2 列和 3 行。然后我将flex-column 更改为flex-row，将justify-content-between 更改为justify-content-around。然后我得到了这个，我们可以改变这个容器的宽度。

我没有使用任何自定义 CSS。希望对你有帮助

<div class="d-flex flex-row justify-content-around">
    <div>
      <input type="radio" id="male" name="gender" value="male">
      <label for="male">XXXX</label><br>
      <input type="radio" id="female" name="gender" value="female">
      <label for="female">XXXXX</label><br>
      <input type="radio" id="other" name="gender" value="other">
      <label for="other">XXXXX</label>

    </div>

    <div>
      <input type="radio" id="male" name="gender" value="male">
      <label for="male">XXXXXXXX</label><br>
      <input type="radio" id="female" name="gender" value="female">
      <label for="female">YYYYYYYYYYYYY</label><br>
      <input type="radio" id="other" name="gender" value="other">
      <label for="other">PPPPPPPPPPP</label>

    </div>
  </div>

【讨论】：