равномерно выравнивать переключатели по вертикали и горизонтали во flexbox - PullRequest
Новая
       27

равномерно выравнивать переключатели по вертикали и горизонтали во flexbox

1 голос
/ 04 мая 2020

Я пытаюсь как по вертикали, так и по горизонтали выровнять радиокнопки во 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>

Вот как это выглядит:

enter image description here

1 Ответ

1 голос
/ 04 мая 2020

Что вы хотите сделать? 2 столбца и 3 строки или 2 строки и 3 столбца?

Я предположил, 2 столбца и 3 строки. Затем я изменил flex-column на flex-row и justify-content-between на justify-content-around. Тогда я получил это, мы можем изменить ширину этого контейнера.

enter image description here

Я не использовал никаких пользовательских 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>
...