我不确定这是否可行,但我想问一下。
我想知道在碰到断点时在某些内容之间移动边栏。
例如,像这样的东西:
+---------------------+ +-------------+
| | | |
| 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完成吗?无论如何,只是一个想法。希望使用相同的内容结构,而不必隐藏/显示带有断点的相同内容,并且不必在页面上编写更多标记。
答案 0 :(得分:1)
使用CSS Grid变得更加简单和容易。
.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>
答案 1 :(得分:0)
好吧,我想出了实现方法,请参阅:
.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
编辑:
我意识到示例中的行跨度泄漏行为。因此,我决定进行搜索并找到了this,并创建了这个演示:
.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;
很重要。
希望这会有所帮助!