我觉得有点傻问这个,但是我对Flexboxes的了解已经筋疲力尽,所以我希望别人可以进来帮助我.
我的总体目标是让中间行中的两个项目伸展以填充标题和项目之间的空间,我已经四处搜索并且老实说无法弄清楚我应该做什么.我将CSS Tricks Guide中的代码分叉,最底层的代码,我做了一些修改.我目前拥有的代码是(以全屏模式打开它以使其更清晰):
body,
html {
height: 100%;
}
.wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: flex-start;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
height: 100%;
font-weight: bold;
text-align: center;
}
.wrapper > * {
padding: 10px;
flex: 1 1 100%;
}
.header {
background: tomato;
height: 50px;
flex: 1 1 100%;
}
.footer {
background: lightgreen;
height: 50px;
}
.main {
text-align: left;
align-self: stretch;
background: deepskyblue;
}
.aside-1 …