删除flexbox中不需要的空间 [英] Remove unwanted spaces in flexbox

问题描述

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

I have developed one flex box for desktop mode which is all right. For tablet Mode how to achieve the below given design ?

https://codesandbox.io/embed/rjx6j8njqo

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

How to achieve two labels in the same row while using flex box? Design is this :

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

So for tablet view : min-width 640px to max-width 940px,It should look like the picture attached.

我可以知道如何实现吗?

May I please know how to achieve this ?

谢谢

推荐答案

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

Hope, below code will help you:

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

这篇关于删除flexbox中不需要的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！