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

Question

图像标题在图像具有不同高度的库中按弹性框底部对齐。如何实现第一行文本(标题(水平对齐？

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

更新的代码笔

---

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

---

另一种选择是删除flex-item包装器并使用 Flexbox 的 order 属性，正如我在上一个问题中所建议的那样，水平对齐 3 元素超过 3div