Чего добиваются "flex" и "justify-content", чего не делает "text-align"?

Question

Эти два способа перемещения кнопки справа от ее родителя кажутся мне абсолютно эквивалентными.Есть ли причина выбирать один над другим?Существуют ли обстоятельства, при которых flex работает для выравнивания содержимого вправо, где text-align может быть недостаточно?

.parent {
  text-align: right;
}

<div class="parent"><button>Awesome button!</button></div>

.parent {
  display: flex;
  justify-content: flex-end;
}

<div class="parent"><button>Awesome button!</button></div>

Мне любопытно, потому что я заметил, что Bootstrap изменился с text-align: right на flex между версиями 3 и 4 для выравнивания кнопок в секции нижнего колонтитула модала.

Для дальнейшей иллюстрации:

Answer 1

Да, причина в вертикальном центрировании.align-items: center - это ключ, который позволяет центрировать кнопки по вертикали в модальном нижнем колонтитуле.Это трудно обойтись без flex-блоков - вам нужно будет прибегнуть к «взломам», таким как использование position:absolute или добавление предварительно рассчитанных сумм padding с обеих сторон и т. Д. Flexes (и Grids) позволяют разработчикам определять макетыболее кратко.

Чтобы ответить на ваш вопрос - они не выбрали justify-content:flex-end вместо text-align:right - вместо этого они выбрали flex вместо block в качестве модели дисплея (для вертикальногоцентрирование), и использование justify-content естественно вытекает из этого решения.

Answer 2

Да, есть большая разница.Flexbox - это о блоках, а элемент уровня блока: whearas text-align - о тексте и встроенном элементе уровня.

При наличии одного элемента мы не заметим разницу, но когда речь идет о нескольких элементах, мы увидим четкую разницу.

Вот базовый пример, где у нас есть текст и кнопка внутри контейнера:

.parent-flex {
  display: flex;
  justify-content: flex-end;
  margin-bottom:10px;
}
.parent-normal {
  text-align:right;
}

<div class="parent-flex">some text here  <button>Awesome button!</button></div>

<div class="parent-normal">some text here  <button>Awesome button!</button></div>

Обратите внимание, что в гибком контейнере больше нет пробелов между текстом и кнопкой, поскольку текст станет элементом блока ¹ и кнопка тоже не так, как во втором примере, где оба являются встроенным элементом.До сих пор это нормально, потому что мы можем исправить это с запасом.

Давайте добавим больше текста и снова увидим разницу:

.parent-flex {
  display: flex;
  justify-content: flex-end;
  margin-bottom:10px;
}
.parent-normal {
  text-align:right;
}

<div class="parent-flex">some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here<button>Awesome button!</button></div>

<div class="parent-normal">some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here<button>Awesome button!</button></div>

Теперь у нас есть четкое различие, и мы видим, что гибкий контейнер рассматривает весь текст как элемент блока, и кнопка не будет следовать за текстом, как ввторой контейнер.В некоторых случаях это может быть ожидаемый результат, но не во всех случаях.

Давайте добавим ссылку в наш текст:

.parent-flex {
  display: flex;
  justify-content: flex-end;
  margin-bottom:10px;
}
.parent-normal {
  text-align:right;
}

<div class="parent-flex">some text here some text here some text here some text here some text here some text here some text <a href="">link</a> here some text here some text here some text here<button>Awesome button!</button></div>

<div class="parent-normal">some text here some text here some text here some text here some text here some text here some text <a href="">link</a> here some text here some text here some text here<button>Awesome button!</button></div>

Контейнер flexbox ухудшается!потому что ссылка также заблокирована ¹ , и теперь у нас есть 4 элемента блока.Текст перед ссылкой, ссылка, текст после и кнопка.Мы ясно видим, что это поведение вообще не предназначено.

---

В основном flexbox полезен, когда речь идет о выравнивании элемента, который мы можем рассматривать как блочный элемент или контейнер или блоки и т. Д., Но не когда это происходитв текстовый контейнер.text-align более полезно для выравнивания текста внутри предыдущего элемента block / box / container.

Другими словами, text-align следует использовать на уровне текста для выравнивания текста, изображений и т. Д. И следует учитывать flexboxна верхнем уровне, чтобы выровнять элемент блока и создать макеты.

---

В вашем случае нет большой разницы, так как мы можем рассматривать кнопку как блоки или встроенный элемент.единственной разницей будет пробел между кнопками, с которыми вы столкнетесь, если вы будете рассматривать их как встроенный элемент при использовании text-align.

¹ Говоря в общих чертах, гибкие элементы гибкого контейнера - это боксы, представляющие его содержимое в потоке.

Каждый дочерний элемент в потоке гибкого контейнера становитсяflex item и каждая непрерывная последовательность дочерних текстовых прогонов обернута в анонимный контейнер контейнера flex item .Однако, если вся последовательность дочерних текстовых прогонов содержит только пробел (т. Е. Символы, на которые может влиять свойство пробела), он вместо этого не отображается

Отображаемое значение элемента Flex равноблокированный

https://www.w3.org/TR/css-flexbox-1/#flex-items

Answer 3

Система

flex-box предоставляет более мощные функции, когда речь идет о выравнивании вашего контента.Если у вас есть три кнопки, и вы хотите, чтобы они были расположены на одинаковом расстоянии друг от друга или на одинаковом расстоянии друг от друга и границы контейнера, вы можете присвоить justify-content значение *1003* свойству контейнера.Вы не можете сделать это с помощью text-align или float.