feat: css技巧

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>