Как выровнять элементы подряд с помощью CSS?

Question

У меня есть три кнопки, и я хочу выровнять их в ряд, и они должны получить одинаковое пространство.

Например, у меня есть что-то вроде этого: -

<div class='parent'>
  <button class='child'> Button 1 </button>
  <button class='child'> Button 2 </button>
  <button class='child'> Button 3 </button>
</div>

Теперь я хочучтобы выровнять все кнопки в одном ряду с одинаковым пространством, чтобы, если я добавлю еще одну кнопку в будущем, мне не пришлось беспокоиться, и у каждой кнопки будет одинаковое пространство.

Answer 1

Вы должны учиться около Flex.Вот решение ...

.parent {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.child {
  
}

<div class='parent'>
  <button class='child'> Button 1 </button>
  <button class='child'> Button 2 </button>
  <button class='child'> Button 3 </button>
</div>

Answer 2

Это будет работать.Я настоятельно рекомендую вам прочитать больше о flex , так как это важно для CSS-стилей.

.parent {
  display: flex;
  justify-content: space-between;
}

<div class='parent'>
  <button class='child'> Button 1 </button>
  <button class='child'> Button 2 </button>
  <button class='child'> Button 3 </button>
</div>

Answer 3

.child {
  display: inline-flex;
  margin-right:1.5em;
}

Answer 4

.parent {
  display: flex;
}

.child {
  flex: 1;
}

Ссылка для вышеуказанного кода