挣扎于嵌套的 flexbox 网格
struggling with a nested flexbox grid
我试图用基于负边距的网格系统 (susy) 实现类似网格的模式,但失败了。
我尝试使用 flexbox,但我不确定它是否真的可行,我认为最好的方法是 2 列(A 侧和 B 侧)并给框 (1) 50% 的弹性高度框 2,但不知何故似乎不起作用。
这是我能做到的。
.block {
width: 100%;
background: grey
}
.column {
align-content: stretch;
display: flex;
flex-flow: column wrap;
width: 50%;
}
.box_long {
background-color: pink;
flex: 0 0 50%;
padding: 20px;
border: solid 1px black;
}
.box_small {
background-color: blue;
flex: 0 0 25%;
padding: 20px;
border: solid 1px black;
}
.box_big {
background-color: green;
flex: 0 0 100%;
padding: 20px;
border: solid 1px black;
}
<div class="block">
<div class="column">
<div class="box_long">
</div>
<div class="box_big">
</div>
</div>
<div class="column">
<div class="box_small">
</div>
<div class="box_small">
</div>
<div class="box_small">
</div>
<div class="box_small">
</div>
<div class="box_long">
</div>
</div>
</div>
以下是一种可能适合您的方法:
(HTML没有变化。)
.block {
display: flex;
height: 100vh;
background: grey;
}
.column {
display: flex;
flex-wrap: wrap;
width: 50%;
}
.box_big {
flex-basis: 100%;
height: 70%;
background-color: chartreuse;
border: solid 1px black;
}
.box_small {
flex: 0 0 50%;
height: 35%;
background-color: aqua;
border: solid 1px black;
}
.box_long {
flex-basis: 100%;
height: 30%;
background-color: violet;
border: solid 1px black;
}
* {
margin: 0;
box-sizing: border-box;
}
<div class="block">
<div class="column">
<div class="box_long"></div>
<div class="box_big"></div>
</div>
<div class="column">
<div class="box_small"></div>
<div class="box_small"></div>
<div class="box_small"></div>
<div class="box_small"></div>
<div class="box_long"></div>
</div>
</div>
jsFiddle
这是您要找的吗?
* {
box-sizing: border-box
}
.block {
background: grey;
display: flex;
height: 250px;
}
.column {
flex: 1;
display: flex;
flex-wrap: wrap;
}
.column.col {
flex-direction: column;
flex-wrap: nowrap;
}
.column.col div {
flex: 1;
border: 1px solid black;
}
.column.row div {
border: 1px solid black;
flex-basis: 50%;
height: 25%;
}
.column.row .box_long {
height: 50%;
flex-basis: 100%;
}
.box_long {
background-color: pink;
}
.box_small {
background-color: blue;
}
.box_big {
background-color: green;
}
<div class="block">
<div class="column col">
<div class="box_long">
</div>
<div class="box_big">
</div>
</div>
<div class="column row">
<div class="box_small">
</div>
<div class="box_small">
</div>
<div class="box_small">
</div>
<div class="box_small">
</div>
<div class="box_long">
</div>
</div>
</div>
我试图用基于负边距的网格系统 (susy) 实现类似网格的模式,但失败了。
我尝试使用 flexbox,但我不确定它是否真的可行,我认为最好的方法是 2 列(A 侧和 B 侧)并给框 (1) 50% 的弹性高度框 2,但不知何故似乎不起作用。
这是我能做到的。
.block {
width: 100%;
background: grey
}
.column {
align-content: stretch;
display: flex;
flex-flow: column wrap;
width: 50%;
}
.box_long {
background-color: pink;
flex: 0 0 50%;
padding: 20px;
border: solid 1px black;
}
.box_small {
background-color: blue;
flex: 0 0 25%;
padding: 20px;
border: solid 1px black;
}
.box_big {
background-color: green;
flex: 0 0 100%;
padding: 20px;
border: solid 1px black;
}
<div class="block">
<div class="column">
<div class="box_long">
</div>
<div class="box_big">
</div>
</div>
<div class="column">
<div class="box_small">
</div>
<div class="box_small">
</div>
<div class="box_small">
</div>
<div class="box_small">
</div>
<div class="box_long">
</div>
</div>
</div>
以下是一种可能适合您的方法:
(HTML没有变化。)
.block {
display: flex;
height: 100vh;
background: grey;
}
.column {
display: flex;
flex-wrap: wrap;
width: 50%;
}
.box_big {
flex-basis: 100%;
height: 70%;
background-color: chartreuse;
border: solid 1px black;
}
.box_small {
flex: 0 0 50%;
height: 35%;
background-color: aqua;
border: solid 1px black;
}
.box_long {
flex-basis: 100%;
height: 30%;
background-color: violet;
border: solid 1px black;
}
* {
margin: 0;
box-sizing: border-box;
}
<div class="block">
<div class="column">
<div class="box_long"></div>
<div class="box_big"></div>
</div>
<div class="column">
<div class="box_small"></div>
<div class="box_small"></div>
<div class="box_small"></div>
<div class="box_small"></div>
<div class="box_long"></div>
</div>
</div>
jsFiddle
这是您要找的吗?
* {
box-sizing: border-box
}
.block {
background: grey;
display: flex;
height: 250px;
}
.column {
flex: 1;
display: flex;
flex-wrap: wrap;
}
.column.col {
flex-direction: column;
flex-wrap: nowrap;
}
.column.col div {
flex: 1;
border: 1px solid black;
}
.column.row div {
border: 1px solid black;
flex-basis: 50%;
height: 25%;
}
.column.row .box_long {
height: 50%;
flex-basis: 100%;
}
.box_long {
background-color: pink;
}
.box_small {
background-color: blue;
}
.box_big {
background-color: green;
}
<div class="block">
<div class="column col">
<div class="box_long">
</div>
<div class="box_big">
</div>
</div>
<div class="column row">
<div class="box_small">
</div>
<div class="box_small">
</div>
<div class="box_small">
</div>
<div class="box_small">
</div>
<div class="box_long">
</div>
</div>
</div>