弹性项目下方的水平对齐文本

Question

图片标题在图片具有不同高度的图库中由 flexbox 底部对齐。如何实现第一行文本（标题）水平对齐？

<style type="text/css">

    * {
        box-sizing: border-box; }

    .flex-container {
        display: flex;
        flex-wrap: wrap; }

    .flex-item {
        width: 50%;
        padding: 20px;
        display: flex;
        flex-direction: column; } 

    .flex-item img {
        width: 100%;
        height: auto; }

    .flex-image {
        flex: 1 0 auto; }

</style>

<div class="flex-container">

    <div class="flex-item">
        <div class="flex-image">
            <img src="img-1.jpg" alt="" />
        </div>
        <p>title</p>
    </div>

    <div class="flex-item">
        <div class="flex-image">
            <img src="img-2.jpg" alt="" />
        </div>
        <p>title<br>Lorem ipsum dolor sit amet.</p>
    </div>

</div>

请查看我的密码笔：https://codepen.io/tinusmile/pen/MoeORG

非常感谢！

Answer 1

使用现有的标记，图像可以有不同的高度，你需要做这样的事情，你给p一个高度。

由于元素的溢出默认为visible，它会溢出边界，所以我建议设置高度，使其可以容纳2-3行文本。

在较小的屏幕上，您可能需要添加 @media 查询来调整该高度，因为文本很长可能会溢出其下方的任何元素。

.flex-item p {
    height: 50px; }

Updated codepen

---

注意，使用min-height 代替会解决可能会溢出自身下方的任何元素的问题，但如果值不能容纳所有可能的数量，它会使第一行不水平对齐行。

---

另一个选择是删除 flex-item 包装器并使用 Flexbox 的 order 属性，正如我在您的上一个问题中所建议的那样，align-horizontally-3-elements-over-3-divs