为什么 aspectraio 在 flexbox children 中不起作用？

Question

HTML 部分

<div class="container">
            <div class="card">hi</div>
 </div>

CSS 部分

.container{
    width: 500px;
    aspect-ratio: 1/1;
    margin: auto;
    
    display: flex;
    gap: 50px;
    flex-wrap: wrap;

    background: rgba(0, 1000, 0, 0.1);
    justify-content: center;
    
}

.card{
    aspect-ratio: 1/1;
    width: 50px;
    background: rgba(0, 1000, 0, 0.1);
}

使用上面的代码，我希望 card 应该是 50px 的正方形。但令人惊讶的是它的高度变成了 500px。即与父母相同。

请解释为什么会这样。

如果我从 container 中删除 display: flex;，那么 card 将按预期变为完美的正方形。

Answer 1

为什么会这样：align-content和align-items的默认值是stretch。 align-content: stretch 使 flex 行填充 flex 容器的横向尺寸（横向尺寸在您的示例中是高度，因为它是一个行 flexbox）。然后align-items: stretch 使.card 的横向尺寸填充线的横向尺寸，这只是被拉伸为容器的横向尺寸。

见https://drafts.csswg.org/css-flexbox/#valdef-align-items-stretch。它说“如果弹性项目的交叉尺寸属性计算为自动[然后拉伸]。”

该条件的目的是使拉伸不会覆盖项目上指定的交叉尺寸（在您的示例中项目为 .card）。例如。如果有人将 height: 200px 放在 height:300px 行 flexbox 中的项目上，浏览器不应该用 300px 吹走那个 height: 200px。

但是因为你的项目有height:auto，所以项目会拉伸。

flex 规范的这一部分是在 aspect-ratio 存在之前编写的。也许它应该扩展项目未拉伸的情况，以包括具有指定纵横比和明确主尺寸的项目，就像您的示例一样，但是......它没有。这就是我们得到的:(

所以，如果你不想让你的宽高比项目拉伸，你可以做以下任何事情：

• 在项目上指定height
• 将align-content: center（或start或end）放在容器上
• 将align-items: center（或start或end）放在容器上
• 将align-self: center（或start或end）放在物品

Answer 2

指定高度将解决您的代码问题，并允许 display flex 仍然决定卡片在容器内的位置。看看这段代码。

.container{
    width: 500px;
    aspect-ratio: 1/1;
    margin: auto;
    
    display: flex;
    gap: 50px;
    flex-wrap: wrap;

    background: rgba(0, 1000, 0, 0.1);
    justify-content: center;
    
    align-items: center; /*To center the card vertically inside of the container*/
}

.card{
    height: 50px;
    width: 50px;
    background: rgba(0, 1000, 0, 0.1);
  
    /*To center the text inside of the .card*/
    display: flex;
    justify-content: center;
    align-items: center;
}

<div class="container">
            <div class="card">hi</div>
 </div>