Css 弯曲收缩不垂直工作

您可以在此处看到完整的代码：

我创建了一个flex容器，其类为：联系人详细信息链接

它内部的链接具有“profile link”类，它们设置了高度和宽度，并且flex shrink属性显式设置为：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;
}

当您开始减少页面宽度，使“配置文件链接”框开始溢出时，它们不会收缩。我已经搜索了一个小时，但在这里找不到任何可以帮助我的东西

有人知道如何解决这个问题吗

---

如果我去掉高度属性，这些项目会收缩得很好，所以我猜我对垂直收缩这些项目有些不知道。

Temani在他的评论中回答了我的问题，基本上，仅使用flex shrink属性无法实现我想要的功能-它仅在主轴方向上工作-即，由于我的flex设置了direction:row，因此它仅水平收缩我的项目

问题得到了回答，我会用额外的代码（媒体查询）做我想做的事情，或者改变我想要的结果

---

感谢大家的回答。

你把轴心弄糊涂了。。。flex shrink在此处水平工作，因为它是一个行方向。。高度不会收缩，因为它是固定的，与flex shrink无关。此外，如果删除固定高度，您将依赖拉伸属性，因此它是拉伸而不是收缩。Hi Temani，感谢您的回答，这很有意义。然而，这是否意味着实际上没有办法同时在两个方向上收缩呢；关于。联系方式链接？我不确定我是否理解你想去哪里…我会说“不”，因为收缩功能只影响一个方向，但如果你在没有收缩功能的情况下有不同的想法，那么如果你管理你的身高或依赖其他功能，它可以是“是”。。。例如，如果删除高度，则拉伸功能将在两个方向上收缩，即使它不是真正的垂直收缩