From 17797045234ee81d877721f15363d152f8d4edbd Mon Sep 17 00:00:00 2001
From: LCJ-MinYa <1049468118@qq.com>
Date: Thu, 20 Mar 2025 14:07:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20css=E6=8A=80=E5=B7=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/demo/cssDemo.vue | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 src/views/demo/cssDemo.vue

diff --git a/src/views/demo/cssDemo.vue b/src/views/demo/cssDemo.vue
new file mode 100644
index 0000000..71fbde9
--- /dev/null
+++ b/src/views/demo/cssDemo.vue
@@ -0,0 +1,35 @@
+<template>
+    <base-container>
+        <el-card header="单个子元素和多个子元素显示不同样式,单个子元素没有margin背景黄色,多个子元素有margin背景红色">
+            <div class="father">
+                <div class="child1">单个子元素</div>
+            </div>
+
+            <div class="father">
+                <div class="child1">子元素1</div>
+                <div class="child1">子元素2</div>
+                <div class="child1">子元素3</div>
+            </div>
+        </el-card>
+    </base-container>
+</template>
+
+<style lang="scss" scoped>
+.father {
+    display: flex;
+    align-items: center;
+    height: 120px;
+
+    & > .child1 {
+        width: 100px;
+        height: 100px;
+        background-color: #f00;
+        margin: 0 20px;
+    }
+
+    & > .child1:only-child {
+        margin: 0px;
+        background: yellow;
+    }
+}
+</style>