在DevEco Studio中实现 层叠布局，利用zindex属性显示三个圆 弹性布局，展现flexshrink，flexgrow，flexbasis属性的效果

在DevEco Studio中实现层叠布局（Stacking Layout）和弹性布局（Flexbox Layout），你可以按照以下步骤操作：

**层叠布局（Z-index 层叠）：**
1. 创建HTML结构：首先，创建三个圆形元素（可以使用`<div>`标签并设置背景颜色和边框样式模拟圆形），例如：

<div id="circle1" class="circle"></div>
<div id="circle2" class="circle"></div>
<div id="circle3" class="circle"></div>

2. CSS样式：
- 设置`.circle`样式，包含z-index属性来控制层级：

   .circle {
     border-radius: 50%;
     width: 100px;
     height: 100px;
     position: relative;
   }
   #circle1 { background-color: red; z-index: 1; }
   #circle2 { background-color: blue; z-index: 2; }
   #circle3 { background-color: green; z-index: 3; }

这样，红色圆形会在最上层，绿色圆形在中间，蓝色圆形在底层。

**弹性布局（Flexbox）：**
1. 同样在HTML中设置容器：

<div id="flex-container" class="flex-container">
  <div id="item1" class="flex-item">Item 1</div>
  <div id="item2" class="flex-item">Item 2</div>
  <div id="item3" class="flex-item">Item 3</div>
</div>

2. CSS样式：

   .flex-container {
     display: flex;
     justify-content: space-between; /* 分布方式 */
     align-items: center;       /* 对齐方式 */
     flex-wrap: wrap;           /* 如果一行装不下，换行 */
     padding: 10px;
   }
   
   .flex-item {
     flex-grow: 1;      /* 自动增长空间，默认值0 */
     flex-shrink: 1;     /* 缩小时的比例，默认值1 */
     flex-basis: auto;    /* 初始大小，如果没有指定，auto表示内容撑开 */
     margin: 10px;
     width: 150px;       /* 固定宽度，实际可根据需要调整 */
     height: 150px;
   }