[英]Move sidebar in between other elements on smaller screens
我不完全確定這是可能的,但我想我會問。
我想在遇到斷點時在某些內容之間移動側邊欄。
所以,例如這樣的事情:
+---------------------+ +-------------+
| | | |
| 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 來完成? 無論如何,只是一個想法。 希望使用相同的內容結構,而不必使用斷點隱藏/顯示相同的內容並在頁面上編寫更多標記。
使用 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>
好吧,我想出了如何實現這一點,請參閱:
.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;
很重要。
希望這可以幫助!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.