获取弹性框列以填充可用空间

我一直在试图让CSS弹性框正确工作，以填充列弹性框中的项目。获取弹性框列以填充可用空间

基本上我希望这段代码将两块柔性片均匀地分隔开，每片都占用可用高度的50％。如果我手动将高度设置为50％，它可以工作，但这似乎是不正确的解决方案，因为我认为设置flex：1应该这样做。

我在这里阅读指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/并尝试了各种对齐自我，flex-grow，align-content来查看是否可以修复它，但到目前为止我没有运气。我确信我错过了一些简单的东西，但我一直无法弄清楚，并且阅读关于堆栈溢出的其他问题似乎没有帮助我弄清楚我做错了什么。

.flex { 
 
    display: flex; 
 
} 
 

 
.flex1 { 
 
    flex: 1; 
 
} 
 

 
.col-flex { 
 
    flex-flow: column nowrap; 
 
    justify-content: space-evenly; 
 
}

<div class="flex" style="height:200px"> 
 
    <div class="flex1"> 
 
    <div class="col-flex" style="height:100%;background-color:grey"> 
 
     <div class="flex1" style="background-color:blue;flex-grow:1">I should be top half, you shouldn't see grey</div> 
 
     <div class="flex1" style="background-color:green;flex-grow:1">I should be bottom half, you shouldn't see grey</div> 
 
    </div> 
 
    </div> 
 
    <div class="flex1" style="background-color: red;"> 
 
    The flex on the row based flex works correctly; 
 
    </div> 
 
</div>

全部代码在这里：https://codepen.io/anon/pen/EwbLMM

来源

2017-10-04 Zipper

容器需设置为'显示：柔性' – sol

使容器中的Flexbox的了。添加display: flex到col-flex - 见下面的演示：

.flex{ 
 
    display:flex; 
 
} 
 

 
.flex1{ 
 
    flex:1; 
 
} 
 

 
.col-flex{ 
 
    display: flex; /* ADDED */ 
 
    flex-flow: column nowrap; 
 
    justify-content: space-evenly; 
 
}

<div class="flex" style="height:200px"> 
 
    <div class="flex1"> 
 
    <div class="col-flex" style="height:100%;background-color:grey"> 
 
     <div class="flex1" style="background-color:blue;flex-grow:1">I should be top half, you shouldn't see grey</div> 
 
     <div class="flex1" style="background-color:green;flex-grow:1">I should be bottom half, you shouldn't see grey</div> 
 
    </div> 
 
    </div> 
 
    <div class="flex1" style="background-color: red;"> 
 
    The flex on the row based flex works correctly; 
 
    </div> 
 
</div>

来源

2017-10-04 16:08:31 kukkuz

获取弹性框列以填充可用空间

回答

相关问题