使用flexbox

Question

我正在使用flexbox创建布局。 布局左侧有多个方框，右侧边栏有多个方框。

宽屏幕，左右相邻。 在移动屏幕上，左右应该相互混合。这张图片会更清晰：

我试图用flexbox来实现这一目标。 我遇到的问题是大屏幕。 R1盒子伸展到L1盒子的底部。你可以在这里看到：demo

因此，在小提琴中，粉红色的R2框应该向上移动到R1框的文本正下方。 R1框内应该没有空的蓝色空间。

以下是代码：

HTML

<div class="container">
  <div class="header">header</div>
  <div class="content">
    <div class="leftContent1">
        L1
    </div>
    <div class="leftContent2">
        L2
    </div>
    <div class="rightContent1">
        R1
    </div>
    <div class="rightContent2">
        R2
    </div>
  </div>
  <div class="footer">footer</div>  
</div>

CSS

.container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    min-height: 100%;
    background-color: lightgrey;
    align-items: center;
}

.header {
    background-color: cornflowerblue;
    width: 100%;
    height: 80px;
    margin: 0px;
}
.content {
    background-color: lightgreen;
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-flow:row wrap;
    flex-grow: 1;
    align-content: flex-start;
}
.leftContent1 {
    order:1;
    flex:0 1 100%;
    background-color: gold;
}
.leftContent2 {
    order:3;
    flex:0 1 100%;
    background-color: yellow;
}
.rightContent1 {
    order:2;
    flex:0 1 100%;
    background-color: lightblue;
}
.rightContent2 {
    order:4;
    flex:0 1 100%;
    background-color: pink;
}
.footer {
    background-color: cornflowerblue;
    width: 100%;
    height: 85px;
    margin: 0px;
}

@media all and (min-width: 850px) {
    .content {
        width: 800px;
        margin: 0 auto;
    }
    .leftContent1 {
        order:1;
        flex:0 1 600px;
    }
    .leftContent2 {
        order:3;
        flex:0 1 600px;
    }
    .rightContent1 {
        order:2;
        flex:0 1 200px;
    }
    .rightContent2 {
        order:4;
        flex:0 1 200px;
    }
}

提前致谢！

Answer 1

请检查是否这样......

<style>
.container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    min-height: 100%;
    background-color: lightgrey;
    align-items: center;
}

.header {
    background-color: cornflowerblue;
    width: 100%;
    height: 80px;
    margin: 0px;
}
.content {
    background-color: lightgreen;
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-flow:row wrap;
    flex-grow: 1;
    align-content: flex-start;
}
.leftContent1 {
    order:1;
    flex:0 1 100%;
    background-color: gold;
}
.leftContent2 {
    order:2;
    flex:0 1 100%;
    background-color: yellow;
}
.rightContent1 {
    order:3;
    flex:0 1 100%;
    background-color: lightblue;
}
.rightContent2 {
    order:4;
    flex:0 1 100%;
    background-color: pink;
}
.footer {
    background-color: cornflowerblue;
    width: 100%;
    height: 85px;
    margin: 0px;
}

@media all and (min-width: 850px) {
    .content {
        width: 800px;
        margin: 0 auto;
    }
    .leftContent1 {
        order:1;
        flex:0 1 600px;
    }
    .leftContent2 {
        order:3;
        flex:0 1 600px;
    }
    .rightContent1 {
        order:2;
        flex:0 1 200px;
    }
    .rightContent2 {
        order:4;
        flex:0 1 200px;
    }
}
</style>

<div class="container">
  <div class="header">header</div>
  <div class="content">
    <div class="leftContent1">
        L1
    </div>
    <div class="leftContent2">
        L2
    </div>
    <div class="rightContent1">
        R1
    </div>
    <div class="rightContent2">
        R2
    </div>
  </div>
  <div class="footer">footer</div>  
</div>