FlexBox：同一列上有 2 个元素，而 flex-direction 列

Question

我有一个包含 3 个元素的容器，它们的宽度加在一起为 100% (25%,50%,25%)。如果容器小于 800 像素，则应更改元素的顺序。 #box2 的宽度为 100%。 #box1 和#box3 的宽度都应该是 50%，并且在同一列上。因此，作为最终结果，我应该有一列#box2 为 100%，第二列#box1 和#box2 为 50%。如何让#box1 和#box3 在下面的代码中位于同一列？

JsFiddle (link)

#container {
  display: flex;
  flex-direction: row;
  max-width: 100vw;
  width: 100%;
}
#box1 {
  background: yellow;
  width: 25%;
}
#box2 {
  background: orange;
  width: 50%;
}
#box3 {
  background: red;
  width: 25%;
}


/* Large Ansicht */
@media only screen and (max-width: 800px) {
 #container {
  flex-direction: column;
 }
 #box1 {
  background: yellow;
  width: 50%;
  order: 2;
 }
 #box2 {
  background: orange;
  width: 100%;
  order: 1;
 }
 #box3 {
  background: red;
  width: 50%;
  order: 3;
 }
}

<div id="container">
  <div id="box1">sidemenu</div>
  <div id="box2">app</div>
  <div id="box3">sidemenu 2</div>
</div>

Answer 1

您可以将 flex-direction: column; 替换为 flex-wrap: wrap; :

#container {
  display: flex;
  flex-direction: row;
  max-width: 100vw;
  width: 100%;
}
#box1 {
  background: yellow;
  width: 25%;
}
#box2 {
  background: orange;
  width: 50%;
}
#box3 {
  background: red;
  width: 25%;
}


/* Large Ansicht */
@media only screen and (max-width: 800px) {
 #container {
  flex-wrap: wrap;
 }
 #box1 {
  background: yellow;
  width: 50%;
  order: 2;
 }
 #box2 {
  background: orange;
  width: 100%;
  order: 1;
 }
 #box3 {
  background: red;
  width: 50%;
  order: 3;
 }
}

<div id="container">
  <div id="box1">sidemenu</div>
  <div id="box2">app</div>
  <div id="box3">sidemenu 2</div>
</div>

FlexBox：同一列上有 2 个元素，而 flex-direction 列

FlexBox: 2 Elements on the same column while flex-direction column

html

css

flexbox

flexboxgrid