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：改变盒模型，避免元素尺寸意外扩大（边框或内边距不会超出设定的宽高）