柔性物品高度25％

Question

我有一个使用flexbox自动填充其高度的列，在此我有4个项目，我希望每个项目都是其容器高度的25％。

我创建了这个小提示来显示我当前的代码：https://jsfiddle.net/fc66rfo3/1/ 我希望右边的蓝色方框都是黄色容器高度的25％。

我一直在使用这个答案：https://stackoverflow.com/a/23442782/3909886尝试让我的代码正常工作，但这些项目似乎并不像我希望的那样流动。

我试图影响高度的主要CSS看起来像这样：

.resources-links {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.col-1of1 {
    height: 25%;
    display: flex;
}

Answer 1

别担心。只需删除“高度：25％;显示：flex; ”并添加“ flex：1; ”。

CSS：

删除此

.col-1of1 {
  height: 25%;
  display: flex;
}

添加此

.col-1of1 {
  flex: 1;
}