时间戳

首页 > 解决方案 > “flex”和“justify-content”实现了“text-align”没有实现什么？

css - “flex”和“justify-content”实现了“text-align”没有实现什么？

问题描述

这两种将按钮移动到其父级右侧的方法似乎完全等同于我。有理由选择一个而不是另一个吗？在某些情况下，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对齐模式页脚部分中的按钮。

为了进一步说明：

Bootstrap 3中的模态 Bootstrap 4 中的模态

标签： csstwitter-bootstrap-3flexboxbootstrap-4

解决方案

是的，有很大的不同。Flexbox 是关于盒子的，而块级元素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 容器中，文本和按钮之间不再有空白，因为文本将成为块元素1和按钮，这在第二个示例中不是这种情况，两者都是内联元素。到现在为止，没关系，因为我们可以用保证金来纠正这个问题。

让我们放更多的文字，再看看区别：

.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 容器越来越差！因为链接也被阻止了1现在我们有 4 个块元素。链接之前的文本、链接、之后的文本和按钮。我们可以清楚地看到，这种行为根本不是有意的。

基本上 flexbox 在对齐元素时很有用，我们可以将其视为块元素或容器或框等，但对于文本容器则不然。text-align在对齐前一个块/框/容器元素内的文本时更有用。

换句话说，text-align应该在文本级别使用来对齐文本、图像等，而 flexbox 应该在更高级别考虑以对齐块元素并创建布局。

在您的情况下，没有太大区别，因为我们可以将按钮视为框或内联元素。唯一的区别是在使用text-align.



1简单地说，弹性容器的弹性项目是代表其流入内容的盒子。

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

弹性项目的显示值被阻塞

我围绕同一主题撰写的相关文章：https ://dev.to/afif/never-make-your-text-container-a-flexbox-container-m9p

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

推荐阅读