如何使Flex：1对于移动设备具有响应能力？

Question

我创建了3列，每列具有相同的精确宽度。我使用以下代码创建了这个代码：

我的计划是拥有3个div，每个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

您可以使用媒体查询来实现。在这里，如果屏幕大于500像素，则类别将显示为块，因此每个类别均为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

嘿，您可以通过flex方式尝试一下，您需要在代码中做些改动

见我的小提琴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>