将两个垂直堆叠的弹性项对齐放在一个全高弹性项旁边

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

正如我在第一篇评论中发布的那样，您可以通过将第一个弹性项目设为弹性框来实现：

<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/

Answer 2

此布局的关键是创建一个包含两个弹性项目的弹性容器 - 第一个包含mysqli和<h4>，另一个包含<p> - 并对齐它们在<img>中。然后将第一个flex项目转换为flex容器，并将其两个项目对齐row。

<强> HTML

column

<强> CSS

<section class="focus-item">
    <div class="item focus-item-1"><!-- nested flex container 1 -->
        <h4>Brand</h4>
        <p>Identity aliquam ipsum ante morbi sed ipsum mollis. 
           Sollicitudin viverra, vel varius eget sit mollis.</p>
    </div>
    <div class="item focus-item-2"><!-- nested flex container 2 -->
        <img src="http://i.imgur.com/60PVLis.png" height="200" width="200" alt="">
    </div>
</section>

DEMO