html - 每行 3 个元素的响应式 flexbox，然后是 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 个元素，在移动设备上每个元素一个，但没有 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 demo

在第一个flex 规则中，flex-grow 被设置为1。这意味着 flex 元素将占用所有可用空间。

因此，通过flex-basis表示的每一项的宽度不再需要是传统的33.33%(每行3项)、50%(每行2项)和100% .

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

在这种情况下，由于采用了 flex 技术，flex-grow 会消耗剩余空间，而 flex-basis 只需要大到足以强制换行即可。

因此，例如，对于 flex-basis: 26%，只有三个元素可以放在该行上。第四个必须包裹。有足够的利润空间。 flex-grow 填充空白空间。