<template>
    <div class="outer-div">
        <div class="inner-div">
            <p>div1</p>
        </div>
        <div class="inner-div">
            <p>div2</p>
        </div>
        <div class="inner-div">
            <p>div3</p>
        </div>
    </div>
</template>
<style scoped lang="scss">
    /* 外层 div 样式 */
    .outer-div {
        display: flex; /* 使用 flex 布局，使得子元素可以水平排列 */
        justify-content: space-between; /* 子元素之间的距离等分 */

        /* 子 div 样式 */
        .inner-div {
            flex: 1; /* 使得子 div 等分宽度 */
            display: flex; /* 再次使用 flex 布局，使得子 div 的内容可以居中 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */

            /* 如果你有特定的内容需要添加样式，可以在这里添加 */
            p {
                /* 这里可以添加你想要的样式 */
            }
        }
    }
</style>