设置flexbox元素的基线

Question

考虑这个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会做正确的事 - 如果我能确保元素div在水平条上有它们的基线。

请参阅this codepen link了解可以使用的内容。

如何控制这种块元素的基线？

Answer 1

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

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

该行的内容位于一个弹性框中：

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

另一行下的内容：

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

Answer 2

  

我想使用flexbox水平排列元素，这样   水平规则对齐。似乎对齐项目：基线会   做正确的事

align-items: baseline在这里不会帮助你，因为你想要将不同的元素与另一个元素对齐（ hr，而不是根据文本基线对齐相同的元素< / em>的）。

如果您可以使用.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一个对齐到底部（即靠近hr），您可以执行margin-top: auto，如下所示：

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

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

完整示例代码段：

＆＃13;

＆＃13;

* { 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; }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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