css - 删除 flexbox 中不需要的空格

Question

我已经为桌面模式开发了一个 flex box，这很好。对于平板电脑模式如何实现下面给定的设计？

https://codesandbox.io/embed/rjx6j8njqo

使用flex box如何实现同一行有两个标签？设计是这样的:

因此对于平板电脑 View :min-width 640px 到 max-width 940px，它应该看起来像附件中的图片。

请问如何实现？

谢谢

Answer 1

希望，下面的代码能帮到你:

.wrapper {
  text-align: center;
  font-family: sans-serif;
  width: 350px;
}

.item {
  margin: 20px 0;
}

.item.gray {
  color: gray;
  font-size: 14px;
}

.price {
  font-size: 38px;
  color: pink;
  display: block;
}

@media (min-width: 640px) and (max-width: 940px) {
  .wrapper {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
  }
  .item {
    width: 50%;
  }
  .item:nth-child(3) {
    order: 1;
  }
}

<div class="wrapper">
  <div class="item">
    <label>Label 1</label>
  </div>
  <div class="item gray">
    <label>Label 2</label>
    <span class="price">Price: $100</span>
  </div>
  <div class="item gray">
    <label>Label 3</label>
  </div>
  <div class="item">
    <label>Change</label>
  </div>
</div>