html - 将两排垂直堆叠的 flex 元素与一个全高 flex 元素对齐

Question

我正在使用 flexbox 并尝试制作 6 个这样的东西:

到目前为止，这是我的代码:

<section class="focus-item">
      <div class="item focus-item-1">
        <h4>Brand </h4>
        <p>Identity
          aliquam ipsum ante morbi sed ipsum mollis.
          Sollicitudin viverra, vel varius eget sit mollis.
        </p>
        <img src="D:/htmlCss/landing/assets/img/focus-item-1.png" alt="" />
      </div>
</section>

CSS

.focus-item {
  display: flex;
  flex-wrap: wrap;
}
.focus-item .item {
  display: flex;
  width: 50%;
  text-align: left;
}
.focus-item .item p {
  display: flex;
  flex: 1;
  align-items: flex-end;
}
.focus-item .item h4 {
  display: flex;
  align-items: flex-start;
}

我在将 h4 置于 p 之上时遇到问题。如果有人能指出正确的方向，我会很棒。

Answer 1

正如我已经在第一条评论中发布的那样，您也可以通过将第一个 flex 元素设为 flex box 来实现:

<div class="container">
    <div class="item-1">
        <h4>Header</h4>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>    
    <img src="https://cdn.tutsplus.com/net/uploads/legacy/958_placeholders/placehold.gif" />
</div>

.container {
    display: flex;
    align-items: flex-end;
}

.item-1 {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

有关工作示例，请参见此处:http://jsfiddle.net/0j7abre9/1/