Question

使用flexbox可以实现类似的功能：

http://i.stack.imgur.com/dmvZN.png（我无法直接放置图片......）

具有该结构：

<main>
  <section class="Div1">
  </section>
  <section class="Div2">
  </section>
  <aside class="Div3">
  </aside>
</main>

我可以更改内部元素的顺序，但我不能添加任何其他元素（如Div1和Div2的包装，这将解决问题）。

我想改变移动设备的元素顺序（Div3在1和2之间），但是对于更高的分辨率，我需要侧边栏...

谢谢！

Answer 1

您如何看待仅使用flexbox对移动设备上的块进行排序，以及在没有它的情况下使用更高分辨率构建布局？

What I suggest on jsfiddle.net

main {
    width: 300px;
    display: flex;
    flex-direction: column;
}

.Div1 {order: 1;}
.Div2 {order: 3;}
.Div3 {order: 2;}

@media (min-width: 768px) {
    main {
        display: block;
    }
    main:after {
        display: block;
        content: '\0020';
        clear: both;
    }
    .Div1, .Div2 {
        width: 60%;  
        float: left;
    }
    .Div3 {
        margin-left: 60%;
    }
}

Answer 2

嗯，Flexbox是不是全能的工具，但你可以用它做很多事情而不是没有它。

你想要做的布局非常容易，但是如果你想要更多的东西，比如将左列更改为3或4 ...元素，你必须再做一个解决方案。

针对您的问题的简单解决方案可能是下面的代码，但它是“静态”！

html, body, .container {
  width: 100%;
  height: 100%;
  overflow: hidden;  
}

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.container div {
  flex: 1 0 auto;
  height: 50%;
  width: 50%;
}

#alfa { background: red; }
#beta { background: green; }
#gama { background: blue; }

<div class="container">
  <div id="alfa">a</div>
  <div id="beta">b</div>
  <div id="gama">c</div>
</div>

如果您想要更多动态解决方案，我认为您必须为每个包含其他元素的列创建元素。这样的事情。

<div class="container">
    <div id="column">
        <div id="alfa">a</div>
        <div id="beta">b</div>
    </div>

    <div id="column">
        <div id="gama">c</div>
    </div>
</div>

CSS flexbox 3盒 - 一个侧边栏

2 个答案: