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

Question

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

我希望在桌面设备上每行 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 个项目，我需要在代码中更改哪些内容才能获得我想要的内容？

Answer 1

布局可以通过调整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 演示

在第一条flex规则中，flex-grow设置为1。这意味着弹性项目将占用所有可用空间。

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

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

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

因此，例如，对于flex-basis: 26%，只有三个项目可以放在该行上。第四个必须结束。有足够的利润空间。flex-grow填补空白空间。