html - Flexbox 侧边栏可以共享新行吗？

Question

在媒体查询后，我可以让 Flexbox 侧边栏共享​​新行吗？

之前(在宽屏幕上)

+---+-------+---+
|   |       |   |
| L |  Main | R |
|   |       |   |
+---+-------+---+

之后(在窄屏幕上)

+-------+
|       |
|  Main |
|       |
+-------+
|   |   |
| L | R |
|   |   |
+-------+

HTML(媒体查询后不可更改)

<div class="container">
  <div class="sideLeft">L</div>
  <div class="MainContent">Main</div>
  <div class="sideRight">R</div>
</div>

Answer 1

您可以使用媒体查询更改 main div 上的 order: -1。您还需要在 container 元素上设置 flex-wrap:wrap 。另外，calc(% - 10px) 适用于两侧 5px 的 margin，但如果您不想要边距，则可以只使用 %，如您所见 here

* {
  box-sizing: border-box;
}
.container {
  display: flex;
  flex-wrap: wrap;
  height: 200px;
  border: 1px solid gray;
  padding: 5px
}
.container > div {
  display: flex;
  border: 1px solid black;
  margin: 5px;
  flex: 1;
}
div.main {
  flex: 3;
}
@media(max-width: 480px) {
  div.main {
    order: -1;
    flex: 0 0 calc(100% - 10px);
  }
  .container > div:not(.main) {
    flex: 0 0 calc(50% - 10px);
  }
}

<div class="container">
  <div class="sideLeft">L</div>
  <div class="main">Main</div>
  <div class="sideRight">R</div>
</div>