Question

您可以在此处查看完整的代码：https://codepen.io/typhoon93/pen/zabzyz/

我创建了一个具有以下类别的flex容器： contact-details-links

其中的链接具有“ profile-link”类，并且已设置高度和宽度，以及flexrink属性明确设置为：1;下面是完整的代码：

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.contact-details-links{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    border: 1px solid green;
    height:300px;
    }
.profile-link{
    border: 1px black solid;
    height:200px;
    width: 300px;
    flex-shrink:1;
}

当您开始减小页面宽度时，“配置文件链接”框开始溢出，它们没有缩小。我已经搜索了最后一个小时，但找不到任何可以帮助我的地方。

任何人都知道如何解决此问题？

如果我删除height属性，则这些项目会缩小得很好，所以我猜想我对垂直缩小这些项目并不了解。

Answer 1

Temani在他的评论中回答了我的问题，基本上我想要的仅靠伸缩属性是不可能的-它仅在主轴方向上起作用-即由于我的flex设置了方向：行，它只能伸缩我的物品水平。

问题已经回答，我将使用其他代码（媒体查询）来做我想做的事情，或者可能更改我想要的结果。

感谢大家的回答。

flex收缩功能无法垂直运行

1 个答案: