如何让元素依据自身内容尺寸生成正方形（含Flex场景示例）

原示例中使用aspect-ratio: 1/1时，中间元素因内容垂直排列导致高度大于宽度，呈现高窄形态。要让元素根据自身内容尺寸自适应为正方形，需确保元素的宽高取内容的最大维度，以下是可行方案：

方案一：纯CSS Grid布局（推荐） #

通过Grid容器让伪元素与内容共享同一区域，伪元素确保宽高比为1:1，内容自动撑开容器的最大尺寸，最终元素呈现正方形。

<!DOCTYPE html>
<html>
<body>
    <style>
        .container{
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px;
        }
        .item{
            display: grid;
            grid-template-areas: "content";
            background-color: antiquewhite;
            padding: 8px;
            place-items: center;
        }
        .item > *,
        .item::before {
            grid-area: content;
        }
        .item::before {
            content: "";
            width: 100%;
            padding-top: 100%;
            visibility: hidden;
        }
    </style>
    <div class="container">
        <div class="item">1234</div>
        <div class="item">1<br>2<br>3</div>
        <div class="item">123456</div>
        <div class="item"><div style="width: 60px; height: 40px;">内部块级元素</div></div>
    </div>
</body>
</html>

方案二：Inline-flex + JS辅助（兼容旧浏览器） #

将元素设为inline-flex让宽度由内容决定，通过JS动态获取内容的最大尺寸，配合min-width/min-height和aspect-ratio强制正方形。

<!DOCTYPE html>
<html>
<body>
    <style>
        .container{
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px;
        }
        .item{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background-color: antiquewhite;
            padding: 8px;
            width: max-content;
            height: max-content;
            min-width: var(--item-size);
            min-height: var(--item-size);
            aspect-ratio: 1/1;
        }
    </style>
    <div class="container">
        <div class="item">1234</div>
        <div class="item">1<br>2<br>3</div>
        <div class="item">123456</div>
        <div class="item"><div style="width: 60px; height: 40px;">内部块级元素</div></div>
    </div>
    <script>
        document.querySelectorAll('.item').forEach(item => {
            const rect = item.getBoundingClientRect();
            const size = Math.max(rect.width, rect.height);
            item.style.setProperty('--item-size', `${size}px`);
        });
    </script>
</body>
</html>

说明 #

• 方案一纯CSS实现，无需JS，支持所有兼容Grid布局的浏览器，适配各类内容（包括块级元素）。
• 方案二需少量JS辅助，适合需要兼容旧版浏览器的场景。

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