问：

如果我在设置了 1：1 纵横比的 flex 容器内有一个项目，并且有意将项目高度拉伸到其他 flex 项目的高度 - 它会忽略设置的纵横比。

<div style="display: flex;">
  <div style="aspect-ratio: 1; background: blue">1:1</div>
  <h1>Blue box should have 1:1 aspect ratio</h1>
</div>

我尝试设置并手动覆盖高度，但我希望高度由 flex stretch 属性设置。width: min-content

HTML CSS 弹性框

不确定这是否可行，因为它很容易造成第 22 条军规类型的情况。如果示例中的框变宽，则它旁边的文本可能需要分成更多行。因此，您的盒子会变得更高，这反过来意味着要保持纵横比，它也必须再次变得更宽......这可能意味着文本需要另一行......等等。CSS 规范的编写方式通常是为了防止这种情况的发生。

1赞 daggett 11/13/2023

我没有考虑过。也就是说，flex 确实内置了溢出功能，因此文本不应换行。如果它不是文本，而是具有固定高度的元素怎么办？

1赞 CBroe 11/13/2023

“也就是说，flex 确实内置了溢出功能，因此文本不应该换行。”- 您给定示例中的文本只是元素的内容，因此它将包裹在那里。h1

1赞 daggett 11/13/2023

啊，是的，对不起，在我的构建中，我让它溢出了。好的，但即便如此，如果另一个元素的高度是固定的呢

答：

1赞 Dean Van Greunen 11/13/2023 #1

解决方案 1

如果要保持蓝色框的 1：1 纵横比，同时允许 flex 容器拉伸其高度，则可以将 flex 属性与固定宽度一起设置，或者在框上使用 min-width 属性。

<div style="display: flex;">
  <div style="flex: 1; aspect-ratio: 1; background: blue;">1:1</div>
  <h1>Blue box should have 1:1 aspect ratio</h1>
</div>

解决方案 2

设置 min-width： 0 允许在必要时缩小框以保持纵横比。

<div style="display: flex;">
  <div style="min-width: 0; aspect-ratio: 1; background: blue;">1:1</div>
  <h1>Blue box should have 1:1 aspect ratio</h1>
</div>

弯曲拉伸项目忽略纵横比

Aspect ratio is ignored with flex stretching items

评论

解决方案 1

解决方案 2

评论