0

考虑这个 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 在水平条上有它们的基线。

请参阅此 codepen 链接以获取一些可玩的东西。

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

4

2 回答 2

2

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

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

该行的内容在一个弹性框中，其中：

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

另一行中的内容如下：

.underline {
    align-items: flex-start;
}
于 2015-09-21T08:55:54.713 回答
0

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

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

如果您可以使用.elements 的固定高度，那么在不更改标记的情况下，您可以进行嵌套flex并均衡您的.topand .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/

代码笔：http : //codepen.io/anon/pen/ZbOyzE

.

于 2015-09-21T10:23:05.483 回答