删除flexbox中不需要的空间

Question

我为桌面模式开发了一个伸缩盒，没问题。 对于平板电脑模式，如何实现以下给定的设计？

https://codesandbox.io/embed/rjx6j8njqo

使用弹性框时如何在同一行中获得两个标签？ 设计是这样的：

因此，对于平板电脑视图：min-width 640px至max-width 940px，它应该看起来像所附的图片。

我可以知道如何实现吗？

谢谢

Answer 1

希望，下面的代码将为您提供帮助：

<eu.davidea.flipview.FlipView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/flip_layout"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:animateDesignLayoutOnly="true" // This line is important 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Put ImageView  on top to hide ViewPager until flip action -->
    <ImageView  
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"/>

    <ViewPager 
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"/>
</eu.davidea.flipview.FlipView>

.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;
  }
}