在单个“列”中的全宽flex项目

Question

我有一个简单的flexbox设置，其中项目具有固定的宽度，并在需要时很好地包装到下一行：

但是，当父元素的宽度足够小且元素全部显示在单个列中时，元素右侧的空白看上去会很尴尬：

是否有一种简单的方法可以将行为保留在第一个屏幕截图中，但是在单个“列”中，元素是否可以填充父元素的整个宽度？据我所知，我无法使用媒体查询，因为我需要使事情与特定的父元素相关，而不是整个屏幕宽度。在单列情况下，事情看起来应该像这样：

下面的示例代码：

.cont {
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
}

.item {
  flex: 0 1 auto;
  width: 200px;
  height: 50px;
  border: 1px solid black;
  background: red;
  margin-right: 10px;
  margin-bottom: 10px;
}

<div class="cont">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Answer 1

在媒体查询中添加此样式

getIntent().getExtras().getInt(...)

@media screen and (max-width: 480px) {
  .item {
    width: 100%;
  }
}

.cont {
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
}

.item {
  flex: 0 1 auto;
  width: 200px;
  height: 50px;
  border: 1px solid black;
  background: red;
  margin-right: 10px;
  margin-bottom: 10px;
}

@media screen and (max-width: 480px) {
  .item {
    width: 100%;
  }
}