在一个全高 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之上时h4问题。 如果有人能指出我正确的方向，我会很棒。

Answer 1

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

<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

该布局的关键是要创建包含两个挠性项一个挠性容器-第一保持的<h4>和<p>和另一保持的<img> -并且在将它们对齐row 。 然后将第一个 flex 项目也转换为 flex 容器，并将其两个项目在column对齐。

HTML

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

CSS

.focus-item {
    display: flex;
}

.item {
    display: flex;
    flex: 1 1 50%;
}

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

演示