实用的 Flexbox 技术：对齐方式切换换行

我最近遇到一个情况，标题被分成两个部分。主标题很大且加粗，像任何常规标题一样左对齐。但然后有一个副标题，右对齐，与主标题位于同一行。当有足够的空间时，这样很不错。但当然，文本总是在变化，您可用的空间也是可变的。让我们来看看。

当有足够空间时，这就是我们想要的效果

如果基于屏幕尺寸或长度问题没有足够空间，我们希望左对齐换行

当有空间时，有许多方法可以将右对齐的文本放置在右侧。

我们可以将其绝对定位到右侧。但是，这样做的主要问题是，绝对定位的元素不在文档流中，因此它无法智能地决定何时相对于其他文本换行。在这种情况下，我们将不得不指定一些我们不希望使用的固定宽度。
我们可以将其浮动到右侧。我们不需要设置宽度，文本仍然在文档流中，这很棒。但是，一旦需要换行，文本将保持紧贴右侧，不会像我们想要的那样整齐地左对齐。
我们可以将其制作成表格，这样我们就可以毫无困难地将文本放置在右侧边缘。但表格单元格根本不会换行，因此我们无法获得我们想要的布局。

幸运的是，Flexbox 可以帮助我们！通过将标题设置为 flex 容器并使用display: flex;，并将标题本身设置为flex-grow: 1;，它可以将副标题推到最右侧。Flex 容器可以换行，因此我们将确保通过flex-wrap: wrap;进行换行。

这是一个视频，展示了所有不太好的方法以及 Flexbox 的获胜方法

还有一个实时演示

查看 CodePen 上 Chris Coyier 的示例同一行标题的换行 (@chriscoyier) on CodePen.

Moe

# 2015 年 6 月 19 日

很棒的解决方案。
我很好奇“align-items: flex-end”的作用是什么？

Jeremy T

评论的永久链接# 2015 年 6 月 19 日

align-items: flex-end 将所有子元素垂直对齐到容器的底部。
Jeremy T

评论的永久链接# 2015 年 6 月 19 日

（或者更普遍地说，对齐到横轴方向的末端，因为如果flex-direction 为 column，它会将所有内容移动到右侧）

Doğukan Güven Nomak

# 2015 年 6 月 19 日

实用的灵活网格系统技术：对齐方式切换换行 :)
http://codepen.io/dnomak/pen/warrKM?editors=110

Rasmus Fløe

# 2015 年 6 月 19 日

Flex 解决方案是唯一一个在较小的视窗中以良好方式降级的解决方案（没有重叠/溢出的文本等）。不错！

我找到了使用text-align: justify 和 :after 元素来解决此类问题的解决方案。它与 Flex 解决方案具有完全相同的降级特性 :)

应该在 IE8+ 中工作

http://jsfiddle.net/rasmusfl0e/ao989zs7/

（……有一个小问题；最后一个文本后的未折叠空格将被解释为单个空格字符……）

Caspian

评论的永久链接# 2015 年 6 月 19 日

这是内联元素通常出现的问题。您可以通过以下两种方式解决它

1) 删除标记中的元素之间的所有符号（允许使用 HTML 注释块）

或

2) 将父级字体大小设置为 0，并将子级字体大小设置为非零值。
Rasmus Fløe

评论的永久链接# 2015 年 6 月 19 日

是的 - 这只是一个提醒，以防有人尝试使用这种技术并因额外的空格而感到困惑。

它是可以解决的 - 正如您所说 :)

ETI

# 2015 年 6 月 19 日

浮动和 Flexbox 示例中存在基线对齐问题。

ETI

评论的永久链接# 2015 年 6 月 19 日

我的意思是 title-main 和 title-note 没有在基线上对齐。
Ricardo Zea

评论的永久链接# 2015 年 6 月 22 日

是的，但您只需要align-items: baseline;
ETI

评论的永久链接# 2015 年 6 月 23 日

这很有效，直到项目撞到下一行，然后它会向边框靠近。尽管如此，它仍然是一个可接受的解决方案。

Eric

# 2015 年 6 月 19 日

媒体查询……你的日子屈指可数。* :D

*如果不是因为 IE，你可能已经死了。

Thomas Hertog

评论的永久链接# 2015 年 7 月 8 日

我认为媒体查询不会因为 Flexbox 而消失。使用它们有很多其他用例。例如，更改字体大小。
此外，您可能希望使用 Flexbox 进行其他布局安排，因为这已经在最终 Flexbox 备忘单中进行了演示 -> http://codepen.io/HugoGiraudel/pen/pkwqH

23r23rwefwefewfwefwe

# 2015 年 6 月 19 日

为什么不在父级容器上使用 text-align justify，在两个子元素上使用 inline-block，并在容器上添加一个额外的 after 伪元素来启用 justify 并将两个子元素定位到左侧和右侧？
这应该在 IE8+ 中工作。

Rasmus Fløe

评论的永久链接# 2015 年 6 月 19 日

我非常喜欢您的想法，以至于我穿越时空并提出了建议 + 在上面进一步的评论中制作了一个演示 ;D

Dalton

# 2015 年 6 月 19 日

这看起来很棒，并且看起来可能非常适合导航？我经常使用的一种模式是将导航浮动到左侧，并将导航 UL 浮动到右侧，这与您示例中的 #2 存在相同的问题。

Anathon

# 2015 年 6 月 19 日

我已经搜索了 8 年来寻找这种换行，它非常容易，非常感谢您！

Igi Manaloto

# 2015 年 6 月 21 日

到目前为止，我一直使用绝对定位方法！好吧，如果我不是要解决我正在使用的 IE8 限制，我会使用这种方法。

它在所有主要浏览器中都受支持。谢天谢地！
https://caniuse.cn/#feat=flexbox

感谢您的文章！

Nick Salloum

# 2015 年 6 月 22 日

您也可以执行以下操作

.nick-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
}

这样可以避免在主标题上设置flex-grow 属性。实际上可能没有区别，但这只是一个替代方案！

Tom Potts

评论的永久链接# 2015 年 6 月 24 日

有一些区别：在 Chris 的版本中，当元素在同一行时，它们之间没有空格；在您的版本中，有空格。如果您在元素上放置背景，您会看到区别：http://codepen.io/karaken12/pen/KpyQwM

我认为两者没有优劣之分；这只是取决于哪一个更适合您的需求。

此评论线程已关闭。如果您需要分享重要信息，请联系我们。