柔性物品高度25%

时间:2016-04-12 10:14:54

标签: html css flexbox

我有一个使用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;
}

1 个答案:

答案 0 :(得分:2)

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

CSS:

删除此

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

添加此

.col-1of1 {
  flex: 1;
}