Html 设置flexbox元素的基线

考虑一下这个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>

A.
B

C
A.

B
C
A.

B

我想使用flexbox将元素水平对齐，以便水平规则对齐。似乎

align items:baseline

会做正确的事情-如果我能确保元素

div

s的基线在水平条上

看看有什么东西可以玩

---

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

您可以使用多个堆叠的FlexBox来实现这一点，但是HTML变得更加复杂，但这似乎是假装您自己设置基线的唯一方法

演示：

行上的内容位于一个flexbox中，其中包含：

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

另一行中行下的内容包含：

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

我想使用flexbox水平排列元素，这样 横向规则对齐。看起来，align items:baseline将 做正确的事

align items:baseline

在这里对您没有帮助，因为您希望将不同的元素与另一个元素对齐（与基于文本基线对齐相同的元素相反，

hr

）

如果您可以使用

.element

的固定高度，那么在不更改标记的情况下，您可以执行嵌套的

flex

，并均衡

.top

和

.bottom

，如下所示：

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

然后，要将

.top

一个对齐到底部（即靠近

hr

），您需要执行

页边距顶部：auto

，如下所示：

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

这也将很好地配合您的

flex-wrap:wrap

。在下面的示例中，尝试更改小提琴窗格的宽度或窗口大小

完整的示例片段：

*{框大小：边框框；填充：0；边距：0；}
.集装箱{
高度：320px；边框：1px实心#ddd；
显示：柔性；柔性包裹：包裹；
对齐项目：居中；
}
.元素{
flex:1自动；
高度：120px；宽度：200px；
填充：0.5em；
}
.top、.bottom{
身高：49%；
显示：柔性；柔性方向：列；
对齐项目：居中；
}
.top>div.bottom>div{flex:0 0自动；}
.top>div{margin top:auto；}

A.
B

C
A.

B
C
A.

B

我认为不可能控制哪个元素是基线。我想您必须将其分为3个部分：行上内容/行下内容。在

.element

中已经存在这种分离。或者你是说我必须首先列出所有

top

，然后列出所有

hr

，然后列出所有

bottom

块？这在多行flexbox布局中很难正常工作。是的，刚刚编写了一个演示，让我发布。我想仔细看看，但是从我的大学网络来看，jsfiddle.net似乎经常超时。我待会再看！谢谢你的代码笔链接。不幸的是，这并不能完全解决这个问题：如果你让它

flex-wrap:wrap（在我的用例中我需要它），而且它必须换行，事情会变得非常糟糕。事实上。。。除了：如果您像在演示中一样在用例中设置固定宽度，您可以使用
内联块
（但我猜flexbox是故意选择的）。