我正在使用 Flexbox 并尝试进行一些复杂的布局操作。 我想创建一种简单的方法来进行移动优先布局,将一些 div 分发到桌面版本中的侧边栏。
像这样:
Mobile Desktop
A D A B
B E
C C
D F
E
F
经过一些测试,我得到了这个解决方案:http://codepen.io/matheusoj/pen/MbWxoV
main {
display: flex;
justify-content: flex-start;
flex-direction: column;
flex-wrap: wrap;
height: 3000px;
align-content: center;
}
div {
width: 100%;
height: 400px;
align-self: flex-start;
}
.a {
background-color: #fc0;
height: 500px;
}
.b {
background-color: #c00;
}
.c {
background-color: #0c0;
}
.d {
background-color: #aaf;
height: 200px;
}
.e {
background-color: #ccc;
}
.f {
background-color: pink;
}
.clear {
width: 0;
flex-basis: 0%;
}
@media (min-width: 768px) {
.left {
order: 150;
width: 200px;
}
.center {
order: 250;
width: 600px;
}
.right {
order: 350;
width: 200px;
}
.a {
order: 201;
}
.e {
order: 202;
}
.clear {
width: 0;
flex-basis: 100%;
}
}
<main>
<div class="a center">A</div>
<div class="b right">B</div>
<div class="c center">C</div>
<div class="d left">D</div>
<div class="e center">E</div>
<div class="f center">F</div>
<!-- ".clear" is used to brake the columns, it should always be at the end -->
<div class="clear left"></div>
<div class="clear center"></div>
</main>
问题是 <main>
元素需要固定的高度才能工作。我无法让它在流体高度下工作。
在 <main>
上没有固定高度的情况下是否可以实现相同的结果?元素?
最佳答案
您可以使用absolute
您的位置.left
和.right
flex 元素。
删除您在 <main>
中设置的固定高度值并在您的媒体查询中使用它:
main {
position: relative;
padding-left: 20%; /* padding-left = .left class width */
padding-right: 20%; /* padding-right = .right class width */
}
.left {
/* order: 150; Removed. It is not needed because the element is not in the normal flow of the document*/
width: 20%;
position: absolute;
top: 0;
left: 0;
}
.center {
order: 250;
/* width: 600px; Removed */
}
.right {
/* order: 350; Removed. It is not needed because the element is not in the normal flow of the document*/
width: 20%;
position: absolute;
top: 0;
right: 0;
}
代码片段:
main {
display: flex;
justify-content: flex-start;
flex-direction: column;
flex-wrap: wrap;
align-content: center;
}
div {
width: 100%;
height: 400px;
align-self: flex-start;
}
.a {
background-color: #fc0;
height: 500px;
}
.b {
background-color: #c00;
}
.c {
background-color: #0c0;
}
.d {
background-color: #aaf;
height: 200px;
}
.e {
background-color: #ccc;
}
.f {
background-color: pink;
}
@media (min-width: 768px) {
main {
position: relative;
padding-left: 20%;
padding-right: 20%;
}
.left {
width: 20%;
position: absolute;
top: 0;
left: 0;
}
.center {
order: 250;
}
.right {
width: 20%;
position: absolute;
top: 0;
right: 0;
}
.a {
order: 201;
}
.e {
order: 202;
}
}
<main>
<div class="a center">A</div>
<div class="b right">B</div>
<div class="c center">C</div>
<div class="d left">D</div>
<div class="e center">E</div>
<div class="f center">F</div>
</main>
CodePen
或者你可以这样做:
main {
display: flex;
justify-content: center; /* Changed value to center */
flex-wrap: wrap;
align-content: center;
}
@media (min-width: 768px) {
.left {
order: -1;
flex-basis: 20%;
}
.center {
flex-basis: 60%;
}
.right {
flex-basis: 20%;
}
}
main {
display: flex;
justify-content: center;
flex-wrap: wrap;
align-content: center;
}
div {
width: 100%;
height: 400px;
align-self: flex-start;
}
.a {
background-color: #fc0;
height: 500px;
}
.b {
background-color: #c00;
}
.c {
background-color: #0c0;
}
.d {
background-color: #aaf;
height: 200px;
}
.e {
background-color: #ccc;
}
.f {
background-color: pink;
}
@media (min-width: 768px) {
.left {
order: -1;
flex-basis: 20%;
}
.center {
flex-basis: 60%;
}
.right {
flex-basis: 20%;
}
}
<main>
<div class="a center">A</div>
<div class="b right">B</div>
<div class="c center">C</div>
<div class="d left">D</div>
<div class="e center">E</div>
<div class="f center">F</div>
</main>
关于html - 使用 Flexbox 进行复杂的布局操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40432711/