响应式 Flexbox，每行 3 个项目，然后是 2 个项目，然后是 1 个项目

我有一个包含六个项目的部分。

我希望在桌面设备上每行 3 个项目，在中型设备上我希望每行 2 个项目，在移动设备上每行 1 个项目

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>  

这是CSS：

.flex-container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

@media only screen and (max-width: 768px) and (min-width: 320px){
    .flex-container {
        display: flex;
        justify-content: center;
        flex-basis: 100%;
    }
}

这在桌面上仅向我显示了 3 个项目，在移动设备上仅显示了 3 个项目，但没有 2 个项目，我需要在代码中更改哪些内容才能获得我想要的内容？

布局可以通过调整来实现flex-basis内部媒体查询。

想法是这样的：

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-container > div {
  flex: 1 0 26%;
}

@media ( max-width: 768px) {
  .flex-container > div {
    flex-basis: 34%;
  }
}

@media ( max-width: 320px) {
  .flex-container > div {
    flex-basis: 51%;
  }
}

/* non-essential demo styles */
.flex-container > div {
  height: 50px;
  background-color: lightgreen;
  border: 2px solid white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2em;
}

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

jsFiddle 演示 http://jsfiddle.net/L01gup8L/41/

在第一个flex rule, flex-grow被设定为1。这意味着弹性项目将占用所有可用空间。

因此，每个项目的宽度通过以下方式表示flex-basis，不再需要是传统的 33.33%（每行 3 个项目）、50%（每行 2 个项目）和 100%。

这些数字通常必须手动调整（例如，calc()) 为边距留出空间。

在这种情况下，得益于 Flex 技术，flex-grow消耗剩余空间并且flex-basis只需要足够大以强制换行。

因此，例如，flex-basis: 26%，线上只能容纳三个项目。第四个必须结束。有足够的利润空间。flex-grow填补空白空间。