使用 flexbox 进行复杂的布局操作

Question

我正在使用 flexbox 并尝试进行一些复杂的布局操作。 我想创建一种简单的方法来进行移动优先布局，将一些 div 分配到桌面版本的侧边栏。

像这样：

Mobile    Desktop
A         D  A  B
B            E
C            C
D            F
E         
F         

经过一些测试，我得到了这个解决方案：http://codepen.io/matheusoj/pen/MbWxoV

main {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  flex-wrap: wrap;
  height: 3000px;
  align-content: center;
}
div {
  width: 100%;
  height: 400px;
  align-self: flex-start;
}
.a {
  background-color: #fc0;
  height: 500px;
}
.b {
  background-color: #c00;
}
.c {
  background-color: #0c0;
}
.d {
  background-color: #aaf;
  height: 200px;
}
.e {
  background-color: #ccc;
}
.f {
  background-color: pink;
}
.clear {
  width: 0;
  flex-basis: 0%;
}
@media (min-width: 768px) {
  .left {
    order: 150;
    width: 200px;
  }
  .center {
    order: 250;
    width: 600px;
  }
  .right {
    order: 350;
    width: 200px;
  }
  .a {
    order: 201;
  }
  .e {
    order: 202;
  }
  .clear {
    width: 0;
    flex-basis: 100%;
  }
}

<main>
  <div class="a center">A</div>
  <div class="b right">B</div>
  <div class="c center">C</div>
  <div class="d left">D</div>
  <div class="e center">E</div>
  <div class="f center">F</div>

  <!--  ".clear" is used to brake the columns, it should always be at the end  -->
  <div class="clear left"></div>
  <div class="clear center"></div>
</main>

---

问题是<main> 元素需要一个固定的高度才能工作。我无法让它在流体高度下工作。

如果<main> 元素没有固定高度，是否可以实现相同的结果？

Answer 1

您可以在 .left 和 .right 弹性项目中使用 absolute 位置。

---

删除您在<main> 中设置的固定高度值并在您的媒体查询中使用它：

main {
    position: relative;
    padding-left: 20%; /* padding-left = .left class width */
    padding-right: 20%; /* padding-right = .right class width */
  }
  .left {
    /* order: 150; Removed. It is not needed because the element is not in the normal flow  of the document*/
    width: 20%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .center {
    order: 250;
    /* width: 600px; Removed */
  }
  .right {
     /* order: 350; Removed. It is not needed because the element is not in the normal flow  of the document*/
    width: 20%;
    position: absolute;
    top: 0;
    right: 0;
  }

---

代码片段：

main {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
}
div {
  width: 100%;
  height: 400px;
  align-self: flex-start;
}
.a {
  background-color: #fc0;
  height: 500px;
}
.b {
  background-color: #c00;
}
.c {
  background-color: #0c0;
}
.d {
  background-color: #aaf;
  height: 200px;
}
.e {
  background-color: #ccc;
}
.f {
  background-color: pink;
}
@media (min-width: 768px) {
  main {
    position: relative;
    padding-left: 20%;
    padding-right: 20%;
  }
  .left {
    width: 20%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .center {
    order: 250;
  }
  .right {
    width: 20%;
    position: absolute;
    top: 0;
    right: 0;
  }
  .a {
    order: 201;
  }
  .e {
    order: 202;
  }
}

<main>
  <div class="a center">A</div>
  <div class="b right">B</div>
  <div class="c center">C</div>
  <div class="d left">D</div>
  <div class="e center">E</div>
  <div class="f center">F</div>
</main>

---

CodePen

---

或者你可以这样做：

main {
  display: flex;
  justify-content: center; /* Changed value to center */
  flex-wrap: wrap;
  align-content: center;
}

@media (min-width: 768px) {
  .left {
    order: -1;
    flex-basis: 20%;
  }
  .center {
    flex-basis: 60%;

  }
  .right {
    flex-basis: 20%;
  }
}

main {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
}
div {
  width: 100%;
  height: 400px;
  align-self: flex-start;
}
.a {
  background-color: #fc0;
  height: 500px;
}
.b {
  background-color: #c00;
}
.c {
  background-color: #0c0;
}
.d {
  background-color: #aaf;
  height: 200px;
}
.e {
  background-color: #ccc;
}
.f {
  background-color: pink;
}
@media (min-width: 768px) {
  .left {
    order: -1;
    flex-basis: 20%;
  }
  .center {
    flex-basis: 60%;
  }
  .right {
    flex-basis: 20%;
  }
}

<main>
  <div class="a center">A</div>
  <div class="b right">B</div>
  <div class="c center">C</div>
  <div class="d left">D</div>
  <div class="e center">E</div>
  <div class="f center">F</div>
</main>