在 flexbox 布局中，交叉轴是不是有 `flex-shrink: 0` 声明？

Posted 2023-03-05

【中文标题】在 flexbox 布局中，交叉轴是不是有 `flex-shrink: 0` 声明？

【英文标题】：In a flexbox layout, is there a `flex-shrink: 0` declaration for the cross axis?在 flexbox 布局中，交叉轴是否有 `flex-shrink: 0` 声明？

【发布时间】：2015-05-21 08:21:21

【问题描述】：

我想防止 flex 容器中的元素在不是 flex-direction 的维度上收缩。以下示例将<article> 元素并排排列成一行。当可用垂直空间减少时，这些元素不会强制它们的 flex 容器显示滚动条；而是内容溢出了元素边界。

屏幕截图 1 - 有足够的水平和垂直空间来显示所有内容：

屏幕截图 2 - 减少的垂直空间将元素边框向上推：

屏幕截图 3 - 垂直空间进一步缩小，容器最终获得滚动条：

屏幕截图 4 - 如果没有 flex-shrink:0，元素宽度（主 flex 轴）也会减小：

flex-shrink:0可以防止水平收缩，但是如何防止元素垂直收缩呢？

给<article> 元素overflow: auto 或类似的东西不会给出想要的结果（= 容器上的滚动条）。理想情况下，显示应该是这样的蒙太奇：

如果我事先知道元素的高度，我可以给它们一个min-height，但情况并非总是如此。

FIDDLE： http://jsfiddle.net/twdan8u8/

HTML：

<main>
    <article>article<br>article<br>article</article>
    <article>article<br>article<br>article</article>
</main>

CSS：

* 
    box-sizing: border-box; /* not the culprit */

html 
    height: 100%;

body 
    position: relative;
    height: 100%;
    margin: 0;
    background: #999;

main 
    overflow: auto;
    background: gold;
    display: flex;
    height: 80%;
    padding: 50px 30px;

article 
    flex-shrink: 0;
    font-size: 28px;
    border: 2px solid red;
    margin-right: 30px;
    padding: 10px;

【参考方案1】：

通常情况下，当我写完问题时，我找到了（或者更确切地说是a）解决方案。由于这可能对其他人有所帮助，因此我发现了以下内容：

如果为 flex 容器指定样式 align-items: flex-start，则元素高度不会降低，并且容器会在必要时获得滚动条（假设有合适的 overflow 值）。

此属性的默认值为“拉伸”。也可以使用align-self 在单个弹性元素上设置它。缺点是元素现在不再同样高（即，它们不再拉伸到完整的可用高度）。