css - CSS Flexbox - 第一个孩子的高度相等

Question

我想要实现的是当布局分解为移动时，图像块与标题/内容块的高度匹配。

布局非常棘手，它在桌面视图上按预期工作，标题栏位于顶部全宽。我认为问题是在移动视图上使用 flex-wrap: wrap？（我已经让这个布局使用 CSS 网格工作，但不幸的是它不能用于生产）

.wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: flex-end;
}

.title {
  background: tomato;
  width: 50%;
}

.image {
  background: cornflowerblue;
  width: 50%;
  height: 150px;
}

.content {
  background: gold;
  width: 50%;
}

<div class="wrapper">
  <div class="image">img</div>
  <div class="title">title</div>
  <div class="content">content</div>
</div>

http://jsfiddle.net/8dvhew3q/4/

标签： cssflexbox

Answer 1

使用此代码

.wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: flex-end;
}

.title,
.image,
.content {
  width: 50%;
}

.title {
  background: tomato;
}

.image {
  background: cornflowerblue;
}

.content {
  background: gold;
}

@media only screen and (min-width: 800px) {
  .title {
    width: 100%;
    order: 1;
  }

  .image {
    order: 2;
    height: 150px;
  }

  .content {
    order: 3;
  }
}