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

在DevC++（一款轻量级的跨平台集成开发环境，主要用于C/C++编程）中，我们通常使用HTML、CSS以及JavaScript来实现网页布局，包括层叠布局（Z-index）和弹性布局（Flexbox）。这里我会分别解释如何设置这三个效果：

1. 层叠布局 (Z-index)：
- 首先，在HTML里创建三个圆形元素，例如`<div>`标签，并给它们一个共同的class名，比如"circle"，然后分别为它们赋予不同的id："circle1", "circle2", "circle3"。

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

- 在CSS中，你可以为`.circle`设置默认样式，如边框为圆形，然后对每个圆设定不同的`z-index`值，较高的`z-index`会使元素更靠前：

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

2. 弹性布局 (Flexbox):
- 在HTML上，给包含这些圆的容器添加`display: flex;`和一些基本的flexbox属性：

   <div id="container" style="display: flex; align-items: center;">
     <div class="circle circle1"></div>
     <div class="circle circle2"></div>
     <div class="circle circle3"></div>
   </div>

- 在CSS中，设置`flex-shrink`, `flex-grow`, 和 `flex-basis`属性：

   #container {
     justify-content: space-between; /* 或者其他的justify-content值 */
     flex-wrap: wrap;            /* 如果内容超过一行，允许换行 */
   }
   .circle {
     flex: 1; /* 默认分配空间 */
     flex-basis: 0%; /* 设置基础大小为0%，让容器分配剩余空间 */
   }

- `flex-shrink`: 控制元素缩小时的比例，默认为1，表示可以按比例缩小；
- `flex-grow`: 控制元素放大时的比例，默认为0，表示不自动增长；
- `flex-basis`: 元素在主轴方向的基础尺寸。