html - 在 flexbox 中组合不同的垂直对齐方式

Question

在一个 flex 容器中，我有另一个 flex 容器，其中有两个元素:content-title 和 content-body。我正在尝试将它们与不同的垂直对齐方式对齐。标题必须位于具有固定(响应)高度的容器的开头，另一个必须延伸到可用空间。

我不明白我该怎么做(如果可以的话)。第一项(标题)有 align-self: start ，并且内容必须拉伸(stretch)(通过父级中的属性:align-content: stretch)。

它没有像我想要的那样工作，因为内容正在使用空间，就好像两个元素都在拉伸(stretch)一样。根据内容，主体(内容主体)必须具有相同的高度。

不知道我说的对不对。这是工作代码: https://codepen.io/anon/pen/JaeXzb

总结一下，我想垂直拉伸(stretch) 2 个元素，但保持第一个元素的高度固定。

这是相关的 html:

<div class="bodycontent-preview"> 
    <div class="orientItem"><!-- Item 1 -->
        <div class="content-title">
            <h2>Title 1</h2>
        </div>
        <div class="content-body">
            <p>Content body here. Lorem ipsum.</p>
        </div>
    </div>
    <div class="orientItem"><!-- Item 2 -->
        <div class="content-title">
            <h2>Title 2</h2>
        </div>
        <div class="content-body">
            <p>Content body here. Lorem ipsum.</p>
        </div>
    </div>
</div>

以及相关的 CSS:

.bodycontent-preview {
    display: flex;
    flex-wrap: wrap;
}
.orientItem {
    display: flex;
    flex: 1 1 0px;
    flex-direction: column;
    flex-flow: row wrap;
    align-content: stretch;
}
.content-title {
    align-self: flex-start;
}

欢迎任何帮助。谢谢!

Answer 1

• 从 .orientItem 中移除 flex-flow: row wrap;
• 将 flex-grow:1; 添加到 .content-body