挣扎着一个嵌套的柔性电网 [英] struggling with a nested flexbox grid
本文介绍了挣扎着一个嵌套的柔性电网的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这就是我得到的工作。
i tried to achieve a grid like pattern with a negative margin based grid system (susy) and failed.
I tried to use flexbox, but i am not sure if its really possible, i thought the best approach would be 2 columns (side A and B) and give the boxes (1) the flex height of 50% of boxes 2, but it somehow doesn't seem to work.
this is as far as i got it working.
.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>
解决方案
Here's one method that may work for you:
(No changes to the 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
这篇关于挣扎着一个嵌套的柔性电网的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文