设置 flexbox 元素的基线答案

【问题标题】：Set baseline of flexbox elements设置 flexbox 元素的基线
【发布时间】：2015-12-17 21:19:57
【问题描述】：

考虑一下这个 HTML

<div class="container">
  <div class="element">
    <div class="top">
      <div>A</div>
      <div>B</div>
    </div>
    <hr/>
    <div class="bottom">
      <div>C</div>
    </div>
  </div>
  <div class="element">
    <div class="top">
      <div>A</div>
    </div>
    <hr/>
    <div class="bottom">
      <div>B</div>
      <div>C</div>
    </div>
  </div>
    <div class="element">
    <div class="top">
      <div>A</div>
    </div>
    <hr/>
    <div class="bottom">
      <div>B</div>
    </div>
  </div>
</div>

我想使用 flexbox 将元素水平排列，以便水平规则对齐。似乎align-items: baseline 会做正确的事——如果我能确保元素divs 在水平条上有它们的基线。

请参阅this codepen link 了解一些可以玩的东西。

如何控制这样一个块元素的基线？

【问题讨论】：

我认为不可能控制哪个元素是基线。我想您必须将其分隔为 3 ：上行内容/行/下行内容。
.element 中已经存在这种分隔。或者你是说我必须首先列出所有top，然后是所有hr，然后是所有bottom 块？这很难与多行 flexbox 布局一起工作。
对，刚写了一个demo，我贴一下吧。

标签： html css vertical-alignment flexbox baseline

【解决方案1】：

您可以使用多个堆叠的 flexbox 来实现这一点，但是 HTML 变得更加复杂，但它看起来像是您自己设置基线的唯一方法。

演示： https://jsfiddle.net/Paf_Sebastien/tLk1jajo/

行上的内容在一个带有 :

的 flexbox 中

.overline {
    align-items: flex-end;
}

在另一行下面的内容用：

.underline {
    align-items: flex-start;
}

【讨论】：

我想仔细看看，但从我的大学网络来看，jsfiddle.net 似乎经常超时。我稍后再看看！
感谢 codepen 链接。不幸的是，这并没有完全解决它：如果你将它设为flex-wrap: wrap;（我在我的用例中需要它）并且它必须换行，那么事情就会大错特错。
Indeed... 除了：如果您在用例中设置固定宽度，就像在演示中那样，您可以使用 inline-block 代替（但我猜选择了 flexbox故意）。

【解决方案2】：

我想使用 flexbox 水平排列元素，这样水平规则对齐。似乎 align-items: baseline 会做正确的事

align-items: baseline 在这里不会为您提供帮助，因为您希望将不同的元素与另一个元素对齐（hr，而不是根据文本基线对齐相同的元素） .

如果您可以使用.elements 的固定高度，那么在不更改标记的情况下，您可以执行嵌套的flex 并均衡您的.top 和.bottom，如下所示：

.top, .bottom { 
    height: 49%; 
    display: flex; flex-direction: column;
    align-items: center;
}
.top > div, .bottom > div { flex: 0 0 auto; }

然后，要将.top 与底部对齐（即靠近hr），您将执行margin-top: auto，如下所示：

.top > div { margin-top: auto; }

这也将与您的flex-wrap: wrap 配合得很好。尝试在下面的示例中更改小提琴窗格的宽度或窗口大小。

完整示例片段：

* { box-sizing: border-box; padding: 0; margin: 0; }
.container {
    height: 320px; border: 1px solid #ddd;
    display: flex; flex-wrap: wrap;
    align-items: center;
}
.element {
    flex: 1 1 auto;
    height: 120px; width: 200px;
    padding: 0.5em;
}
.top, .bottom { 
    height: 49%; 
    display: flex; flex-direction: column;
    align-items: center;
}
.top > div, .bottom > div { flex: 0 0 auto; }
.top > div { margin-top: auto; }

<div class="container">
  <div class="element">
    <div class="top">
      <div>A</div>
      <div>B</div>
    </div>
    <hr/>
    <div class="bottom">
      <div>C</div>
    </div>
  </div>
  <div class="element">
    <div class="top">
      <div>A</div>
    </div>
    <hr/>
    <div class="bottom">
      <div>B</div>
      <div>C</div>
    </div>
  </div>
    <div class="element">
    <div class="top">
      <div>A</div>
    </div>
    <hr/>
    <div class="bottom">
      <div>B</div>
    </div>
  </div>
</div>

小提琴：http://jsfiddle.net/abhitalks/vym76nyn/

Codepen：http://codepen.io/anon/pen/ZbOyzE

【讨论】：