如何让 Flex:1 为移动设备做出响应？

Question

我创建了 3 列，每列的宽度完全相同。我使用以下代码来创建它：

我的计划是有 3 个 div，每个宽度为 33.33%，在手机上，每个“类别”div 应该有 100%。

我用width: 33.33% 尝试过，但是因为我想要在 div 之间留一点空间，所以 33.33% 的宽度太大了。

这就是我尝试使用 flex 的原因。

我怎样才能使这个版本的手机，让每个类别的 div 有 100 宽度？

.category-main-layout {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    margin: auto;
}
.category {
    flex: 1;
    text-align: center;
}

<div class="category-main-layout">
    <div class="category">
    CONTENT
    </div>
    <div class="category">
    CONTENT
    </div>
    <div class="category">
    CONTENT
    </div>
</div>

Answer 1

您可以使用媒体查询来实现这一点。在这里，如果屏幕大于 500px，那么类别将显示为块，因此每个都是 100% 宽度。

.category-main-layout {
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  margin: auto;
}

.category {
  flex-grow: 1;
  text-align: center;
  border: 1px red solid;
}

@media screen and (max-width: 500px) {
  .category-main-layout {
    display: block;
  }
}

<div class="category-main-layout">
  <div class="category">
    CONTENT
  </div>
  <div class="category">
    CONTENT
  </div>
  <div class="category">
    CONTENT
  </div>
</div>

Answer 2

嘿，你可以以灵活的方式尝试这个，你需要在你的代码中改变一点

看我的小提琴https://jsfiddle.net/arindam1996/v4ya76th/3/

.category-main-layout {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: auto;
}
.category {
    flex: 1;
    text-align: center;
}

@media screen and (max-width: 576px) {
  .category {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}
}

<div class="category-main-layout">
    <div class="category">
    CONTENT
    </div>
    <div class="category">
    CONTENT
    </div>
    <div class="category">
    CONTENT
    </div>
</div>