“ 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在版本3和版本4之间从text-align: right更改为flex，用于对齐模式的页脚部分中的按钮。

为进一步说明：

Answer 1

是的，有很大的不同。 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>

请注意，在flex容器中如何在文本和按钮之间不再留空格，因为文本也将成为块元素 ¹ 和按钮，在第二个示例中并非如此两者都是内联元素。到现在为止，这还可以，因为我们可以用保证金来纠正它。

让我们输入更多文本，然后再次看到不同之处：

.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>

现在我们有一个明显的区别，我们可以看到flex容器将所有文本视为一个块元素，而按钮将不会像第二个容器那样跟随文本。在某些情况下，这可能是预期的结果，但并非在所有情况下都是如此。

让我们在文本内添加一个链接：

.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时，如果将它们视为行内元素，则将要面对的按钮之间的空白。

  

¹ 宽松地说，弹性容器的弹性项目是表示其流入内容的框。

     

弹性容器的每个流入子元素成为弹性项目，并且每个连续的子文本序列都包装在一个匿名块容器弹性项目中。但是，如果运行的整个子文本序列仅包含空格（即可能受white-space属性影响的字符），则不会呈现

     

弹性项目的显示值已被阻止

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

Answer 2

flex-box系统在对齐内容时提供了更强大的功能。如果您有三个按钮，并且希望它们彼此等距放置，或者彼此等距且与容器边界相等，则可以将space-between或space-evenly的值赋予justify-content属性，容器。您不能使用文本对齐或浮点数来做到这一点。

Answer 3

是的，原因是垂直居中。 align-items: center是此处的键，它使按钮可以垂直在模式页脚中居中。如果没有弹性框，这很难做到-您需要诉诸“ hacks”，例如使用position:absolute，或者在两侧都添加一些预先计算的padding等。弹性（和网格）允许开发人员可以更简洁地定义布局。

要回答您的问题-他们没有选择justify-content:flex-end而不是text-align:right-他们选择了flex而不是block作为显示框模型（ （用于垂直居中），justify-content的使用自然来自该决定。