Question

我一直环顾四周，无法找到将特定容器移到页面两侧的方法，同时保留其他容器的完好无损。

我想要实现的是移动和桌面屏幕的以下布局：Desktop和Mobile

请注意颜色：移动布局上的第三行应成为桌面布局上的左列，第五行移动布局应成为桌面布局上的正确列其余行应保留为桌面上的中间列。

我试图通过使用Flexbox来实现这一目标，但无法正常完成。

我很想听听建议谢谢！

Answer 1

看起来像一个有趣的运动。它有点粗糙，但基础知识就在那里。

Codepen demo

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  min-height: 100%;
}
.wrap {
  height: 100%;
  border: 1px solid grey;
  display: flex;
  flex-direction: column;
}
.child,
.aside {
  flex: 1;
  background: plum;
  order: 1;
}
.aside {
  background: #c0ffee;
}
@media screen and (min-width: 760px) {
  .wrap {
    flex-wrap: wrap;
  }
  .child {
    order: 2;
    width: 80%;
    flex: 1 0 25%;
  }
  .left {
    order: 1;
    width: 10%;
    flex: 0 0 100%;
  }
  .right {
    order: 3;
    width: 10%;
    flex: 0 0 100%;
  }
}

＆＃13;

<div class="wrap">
  <div class="child">One</div>
  <div class="child">Two</div>
  <div class="aside left">Three</div>
  <div class="child">Four</div>
  <div class="aside right">Five</div>
  <div class="child">Six</div>
</div>

＆＃13;

将某些容器移到侧面而不伤害其他容器

1 个答案: