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

您可以使用媒体查询更改order: -1 div上的main。您还需要在flex-wrap: wrap元素上设置container。另外calc(% - 10px)双方margin为5px，但如果您不想要保证金，则可以使用％here

＆＃13;

* {
  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);
  }
}

＆＃13;

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

＆＃13;

flexbox侧边栏可以共享一个新行吗？

1 个答案: