Question

所以想象我们有四个div。在小屏幕上，我希望它们看起来像下图。 4个盒子一个堆叠在另一个上面并且很好地居中。很容易。

一旦屏幕足够大，我希望行中的第3个div跳到右侧，同时仍保持其他3个堆叠在左侧。我如何使用flexbox或其他一些css技术？

非常感谢。我确定这是一个重复，但我无法找到我的确切方案。

Answer 1

如果对断点使用@media查询，则可以对flex-wrap: wrap使用margin-right，百分比宽度和child2重新排序灵活子项并强制换行child4要使它们与child1

的宽度相同

＆＃13;

body {
  background: lightblue;
}

.flex {
  display: flex;
  flex-direction: column;
  padding: 1em;
  border:1px solid #000;
}

.flex .child {
  font-size: 3em;
  padding: 0.1em;
  border: 1px solid #000;
  margin-bottom: .5em;
  box-sizing: border-box;
}

@media (min-width: 600px) {
  .flex {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .flex .child {
    order: 3;
    width: 33.33%;
  }
  .flex .child:nth-of-type(1) {
    order: 1;
    width: 33.33%;
  }
  .flex .child:nth-of-type(3) {
    order: 2;
    width: 66.66%;
  }
  .flex .child:nth-of-type(2), .flex .child:nth-of-type(4) {
    margin-right: 66.66%;
  } 
}

＆＃13;

<div class="flex">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
</div>

＆＃13;

jsFiddle： https://jsfiddle.net/azizn/3snvjyp5/

编辑：动态高度/仿砖砌布局

如果您希望child3在不创建空格的情况下拥有较高的高度，则可以应用position: absolute，这样它就不会影响流量，而所有其他孩子都在margin-right之下child3 1}}等于body { background: lightblue; } .flex { display: flex; flex-direction: column; padding: 1em; border:1px solid #000; position: relative; } .flex .child { font-size: 3em; padding: 0.1em; border: 1px solid #000; margin-bottom: .5em; box-sizing: border-box; } @media (min-width: 600px) { .flex { flex-direction: row; flex-wrap: wrap; } .flex .child { width: 33.33%; margin-right: 66.66%; } .flex .child:nth-of-type(3) { width: 62.66%; position: absolute; top: 2%; right: 2%; margin-right: 0; } }＆＃39; s宽度：

＆＃13;

<div class="flex">
  <div class="child" style="height: 100px;">1</div>
  <div class="child" style="height: 200px;">2</div>
  <div class="child" style="height: 600px;">3</div>
  <div class="child" style="height: 400px;">4</div>
</div>

＆＃13;

rlang

＆＃13;

此代码更简化，因为我们不需要重新排序子代。

jsFiddle：https://jsfiddle.net/azizn/d0pk8p89/

Answer 2

如果你想按顺序执行它而不是使用flexbox，只需为你的所有组件分配一个min-width，它们会弯曲：1;因此，只有在需要时，他们才会尝试适应，直到他们有空间和堆叠。

如果你希望屏幕被占用，如果div 3可以适合而div 2不能，那么你可能想看看Jquery masonry ..这将帮助你用任何适合的内容填充空间..

当有足够的空间时，Flexbox将一个div放在其他人的右边

2 个答案:

编辑：动态高度/仿砖砌布局