在小屏幕上的其他元素之间移动侧边栏

Question

我不完全确定这是可能的，但我想我会问。

我想在遇到断点时在某些内容之间移动侧边栏。

所以，例如这样的事情：

+---------------------+ +-------------+
|                     | |             |
|    Top Content      | |             |
|                     | |  Sidebar    |
|                     | |             |
+---------------------+ |             |
+---------------------+ |             |
|                     | |             |
|                     | |             |
|                     | |             |
|     Other           | |             |
|     Content         | |             |
|                     | |             |
|                     | |             |
|                     | |             |
|                     | |             |
|                     | |             |
|                     | |             |
+---------------------+ +-------------+

对此：

  +-------------------------+
  |                         |
  |        Top Content      |
  |                         |
  +-------------------------+
  +-------------------------+
  |                         |
  |                         |
  |     Sidebar             |
  |                         |
  |                         |
  |                         |
  +-------------------------+
  +-------------------------+
  |                         |
  |                         |
  |                         |
  |                         |
  |       Other             |
  |       Content           |
  |                         |
  |                         |
  |                         |
  |                         |
  +-------------------------+

所以我知道我可以设置订单，但我不太确定如何正确设置“流程”。

我想知道这样的事情：

 .flex-container { display: flex; flex-direction: row; } .top-content { order: 1; } .sidebar { order: 3; justify-self: flex-end; } .other-content { order: 2; } @media screen and (max-width: 767px) { .flex-container { flex-direction: column; } .sidebar { order: 2; } .other-content { order: 3; } }

 <div class="flex-container"> <div class="top-content"> ... </div> <div class="sidebar"> ... </div> <div class="other-content"> ... </div> </div>

但我不确定这是否合理？ 想知道这是否需要用 CSS Grid 来完成？ 无论如何，只是一个想法。 希望使用相同的内容结构，而不必使用断点隐藏/显示相同的内容并在页面上编写更多标记。

Answer 1

使用 CSS 网格更简单、更容易。

 .grid-container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 3fr; grid-gap: .5em; height: 100vh; background-color: gray; } .top-content { grid-column: 1; background-color: orangered; border: 1px dashed black; } .sidebar { grid-column: 2; grid-row: 1 / -1; background-color: aqua; border: 1px solid black; } .other-content { grid-column: 1; background-color: lightgreen; border: 1px dashed black; } body { margin: 0; } @media (max-width: 500px) { .grid-container { grid-template-columns: 1fr; grid-template-rows: auto; } .sidebar { grid-column: 1; grid-row: 2; } }

 <div class="grid-container"> <div class="top-content">top content</div> <div class="sidebar">sidebar</div> <div class="other-content">other content</div> </div>

jsFiddle 演示

Answer 2

好吧，我想出了如何实现这一点，请参阅：

 .flex-container { display:flex; flex-flow: row wrap; box-sizing: border-box; } @media screen and (max-width: 600px) { break {display:none;} } div { border: 1px black solid; } .flex-container > div { box-sizing: border-box; } .flex-container > div, break{ display: inline-block; } break{ flex-basis: 100%; width: 0px; height: 0px; overflow: hidden; }

 <div class="flex-container"> <div class="top-content" style="width: 350px; height: 500px;"> ... </div> <div class="sidebar" style="width: 350px; height: 500px;"> ... </div> <break></break> <div class="other-content" style="width: 350px; height: 500px;"> ... </div> </div>

我所做的唯一一件事就是创建一个名为<break>的自定义 HTML5 标签。 此标记在您指定的 div 之间创建一个新行。 因此，如果您达到媒体查询（由于分辨率较低），您只需要隐藏它。

最初的想法来自： https : //codepen.io/hrgdavor/pen/waXEqz

编辑：

我意识到在我的示例中泄漏 rowspan 行为。 所以我决定搜索，我找到了这个，我创建了这个演示：

 .flex-container { display:flex; flex-flow: row wrap; box-sizing: border-box; flex-direction: column; flex-wrap: wrap; height: 1000px; } @media screen and (min-width: 600px) { .top-content, .other-content {flex: 0 0 50%;} .sidebar {flex: 0 0 100%; order: 1;} } @media screen and (max-width: 600px) { .flex-container {flex-direction: row;} .top-content, .other-content, .sidebar {flex: 0 0 100%;} .other-content {order:2;} } .flex-container > div { box-sizing: border-box; } /* Only for doing example */ .flex-container > div { border: 1px black solid; }

 <div class="flex-container"> <div class="top-content"> ... </div> <div class="sidebar"> ... </div> <div class="other-content"> ... </div> </div>

注意： box-sizing: border-box; 很重要。

希望这可以帮助！