html - flex 元素 25% 高度

Question

我有一个使用 flexbox 自动填充高度的列，在这个列中我有 4 个元素，我希望每个元素都是其容器高度的 25%。

我创建了这个 fiddle 来显示我当前的代码: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

别担心。只需删除“height: 25%;display: flex;”并添加“flex: 1;”。

CSS:

删除这个

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

添加这个

.col-1of1 {
  flex: 1;
}