Question

我目前正在使用flex来控制我网站的布局。有一个'容器'有显示：flex，里面有三个flex列。这如下图所示。我想做的是，随着屏幕宽度变小，我想使用CSS来改变顺序（我知道该怎么做），还要结合两个列，留下一个是单独的（也在下面说明））。怎么会这样做？我可以改变flex的方向，使它们是垂直的，但我不想包含第三列。

How it is now:                        How I want it :)
|------|  |------|  |------|         |------|  |------|
|      |  |      |  |      |         |  A   |  |  B   |
|  A   |  |  B   |  |  C   |         --------  |      |
|      |  |      |  |      |         |------|  --------
--------  --------  --------         |  C   |  
                                     --------

正如你所看到的，我希望C块改变顺序，并在A下堆叠而不留B.

感谢您的帮助。

Answer 1

试试此代码

.item {
  width: 33.33%;
  height: 200px;
  background: red;
  border: solid 2px #000;
  box-sizing: border-box;
}
.container {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 1000px) {
  .item {
    width: 50%;
  }
}
@media screen and (max-width: 600px) {
  .item {
    width: 100%;
  }
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Answer 2

您可以在flex-wrap和wrap之间切换nowrap。

.flex {
  display: flex;
  flex-wrap: wrap;
}
.flex > div {
  flex-basis: 50%;
}
@media ( min-width: 650px ) {
  .flex {
    flex-wrap: nowrap;
  }
}

<div class="flex">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

麻烦只结合2个弹性列，而仅留下第3个

2 个答案: