无需aspect-ratio属性：如何按flex子项高度设置对应宽高比的宽度

SASS属于编译时预处理器，无法获取运行时的动态容器高度、动态子项数量，因此无法实现该场景需求。下面给出两种可行实现方案：

纯CSS实现（推荐，兼容现代浏览器） #

核心利用CSS原生aspect-ratio属性，当flex子项的高度被flex:1规则确定后，该属性会自动按照设定的宽高比计算对应宽度，再给flex容器设置width: fit-content使其自适应子项宽度即可。
修改后的代码如下：

.flex-container {
  /* 高度可任意动态设置 */
  height: 80vh;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* 容器宽度自适应子项宽度，不要设置固定值 */
  width: fit-content;
}

.item {
  flex: 1;
  background-color: aqua;
  /* 核心配置：宽高比1:1，高度已被flex布局确定，会自动计算对应宽度 */
  aspect-ratio: 1 / 1;
}

HTML结构无需修改：

<div class="flex-container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

该方案兼容Chrome 88+、Firefox 89+、Safari 15.4+，覆盖绝大多数现代用户场景，无需额外JS逻辑，性能最优。

React JS实现（兼容低版本浏览器） #

如果需要兼容不支持aspect-ratio的旧版浏览器，可以通过JS动态计算宽度，思路如下：

1. 容器挂载后读取总高度
2. 减去所有gap的总高度，除以子项数量得到单个子项的实际高度
3. 按照1:1的宽高比，将高度值设置为子项的宽度即可
   示例代码如下：

import { useRef, useEffect, useState } from 'react';

const DynamicFlexDemo = () => {
  const containerRef = useRef(null);
  const [itemWidth, setItemWidth] = useState(0);
  // 子项数量可动态修改，也可以从props/其他状态获取
  const itemCount = 5;
  // 和CSS中设置的gap值保持一致
  const gapSize = 10;

  useEffect(() => {
    const calculateItemWidth = () => {
      const container = containerRef.current;
      if (!container) return;
      const containerHeight = container.clientHeight;
      // 计算单个子项的实际高度
      const singleItemHeight = (containerHeight - gapSize * (itemCount - 1)) / itemCount;
      // 1:1宽高比，宽度等于高度
      setItemWidth(singleItemHeight);
    };

    calculateItemWidth();
    // 监听窗口 resize 事件，容器尺寸变化时重新计算
    window.addEventListener('resize', calculateItemWidth);
    return () => window.removeEventListener('resize', calculateItemWidth);
  }, [itemCount, gapSize]);

  return (
    <div 
      ref={containerRef}
      style={{
        height: '80vh',
        display: 'flex',
        flexDirection: 'column',
        gap: `${gapSize}px`,
        width: 'fit-content'
      }}
    >
      {Array.from({ length: itemCount }).map((_, index) => (
        <div
          key={index}
          style={{
            flex: 1,
            backgroundColor: 'aqua',
            width: `${itemWidth}px`
          }}
        />
      ))}
    </div>
  );
};

export default DynamicFlexDemo;

如果子项数量是动态变化的，只需将itemCount改为对应的状态变量，依赖变化后会自动重新计算宽度。

内容的提问来源于stack exchange，提问作者Luke