2024-07-22 如何让宽度和高度一致（flex布局）

<template>
    <div class="demo-container">
        <div class="demo-item">
            <div class="demo-title">方向指示类图标</div>
            <div class="demo-content">
                <div class="demo-box" v-for="(item, index) in data" :key="index">
                    <div class="demo-name">{{ item.icon }}</div>
                    <t-icon :value="item.icon" />
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive } from "vue";
const data = reactive([
    {
        name: 'icon-arrow-down',
        icon: 'icon-arrow-down'
    },
    {
        name: 'icon-arrow-down',
        icon: 'icon-arrow-down'
    },
    {
        name: 'icon-arrow-down',
        icon: 'icon-arrow-down'
    },
    {
        name: 'icon-arrow-down',
        icon: 'icon-arrow-down'
    }
])
</script>

<style lang="less" scoped>
.demo-container {
    border: 1px solid green;

    .demo-item {
        .demo-title {
            padding: 10px;
            border: 1px solid #ccc;
        }

        .demo-content {
            display: flex;
            align-items: center;
            flex-direction: row;
            flex-wrap: wrap;

            .demo-box {
                border: 1px solid red;
                flex-basis: 25%;
                aspect-ratio: 1 / 1;
                box-sizing: border-box;
                padding: 10px;
            }
        }

    }
}
</style>

效果图：

 关键在于：

flex-basis: 25%;
aspect-ratio: 1 / 1;
box-sizing: border-box;

flex-basis：控制Flex项目的初始大小

aspect-ratio：元素宽高比

box-sizing：改变盒模型，避免元素尺寸意外扩大（边框或内边距不会超出设定的宽高）