为啥 flexbox 中的宽高比 CSS 属性有时会被忽略？ [复制]

Posted 2023-03-05

【中文标题】为啥 flexbox 中的宽高比 CSS 属性有时会被忽略？ [复制]

【英文标题】：Why is aspect-ratio CSS property inside flexbox sometimes ignored? [duplicate]为什么 flexbox 中的宽高比 CSS 属性有时会被忽略？ [复制]

【发布时间】：2021-10-14 19:03:39

【问题描述】：

我想在 flexbox 中保持 5/3 的纵横比。我希望该框为屏幕高度的 33%，并且我想将其中两个堆叠在一起，并使用 flex-direction 设置为列的 flexbox。这似乎打破了纵横比。如果我设置宽度，它会再次起作用。有没有办法在不使用 javascript 计算宽度的情况下做到这一点？我应该做点别的吗？

这是一个演示该问题的代码笔。 https://codepen.io/voxlz/pen/WNjPoqY

html:

<div class='parent'>
  <div class='child'></div>  
  <div class='child'></div>  
  <div class='child'></div>
</div>

css:

.parent 
  display: flex;
  gap: 20px;
  flex-direction: column;


.child 
  flex-grow: 0;
  
/*   this works v, aspect perserved */
/*   width: 200px; */
  
/*   this does not v */
  height: 200px; 
  
  aspect-ratio: 5/3;
  background-color: blue;

【问题讨论】：

添加对齐项：自启动；

请记住，纵横比是一个非常弱的属性：css-tricks.com/weak-declaration

【参考方案1】：

您可以将align-items 属性赋予父级，然后将考虑纵横比。