在宽浏览器上实现 6 行，然后在移动宽度上使用 Flexbox 实现 2 列、3 行

Question

我创建了一个小提琴 https://jsfiddle.net/mh4moyzy/，但我不确定我需要添加什么，以便当浏览器的宽度大于移动设备的宽度(400px(时，使所有这些框堆叠成行，并与浏览器宽度一样宽。这意味着将有 6 行和 1 列。在移动设备中，将有 3 行和 2 列。

 .flex-container {
      padding: 0;
      margin: 0;
      list-style: none;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-flow: row wrap;
      justify-content: space-around;
    }
    .flex-item {
      background: tomato;
      padding: 5px;
      width: 200px;
      height: 150px;
      margin-top: 10px;
      line-height: 150px;
      color: white;
      font-weight: bold;
      font-size: 3em;
      text-align: center;
  }
 

    <ul class="flex-container">
      <li class="flex-item">1</li>
      <li class="flex-item">2</li>
      <li class="flex-item">3</li>
      <li class="flex-item">4</li>
      <li class="flex-item">5</li>
      <li class="flex-item">6</li>
    </ul>

Answer 1

您应该为此使用媒体查询。要使弹性项目采用所有宽度并具有列方向，请添加此代码

@media (min-width: 400px) {
  .flex-container {
    flex-direction: column;
  }
  .flex-item {
    width: auto;
  }
}

此外，如果您想在手机中始终拥有 2 列，您可以将此样式添加到 .flex-item ：

width: calc(50% - 10px);
box-sizing: border-box;

所以示例将如下所示：

.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: space-around;
}
.flex-item {
    background: tomato;
    padding: 5px;
    width: calc(50% - 10px); /* replacing fixed width with percentage */
    height: 150px;
    margin-top: 10px;
    line-height: 150px;
    color: white;
    font-weight: bold;
    font-size: 3em;
    text-align: center;
    box-sizing: border-box; /* Setting borders and paddings to be considered part of width */
}
@media (min-width: 400px) {
  .flex-container {
    flex-direction: column;
  }
  
  .flex-item {
    width: auto;
  }
}

<ul class="flex-container">
    <li class="flex-item">1</li>
    <li class="flex-item">2</li>
    <li class="flex-item">3</li>
    <li class="flex-item">4</li>
    <li class="flex-item">5</li>
    <li class="flex-item">6</li>
</ul>