diff --git "a/\351\230\231\347\202\234\345\273\267/\344\275\234\344\270\232/20241028.html" "b/\351\230\231\347\202\234\345\273\267/\344\275\234\344\270\232/20241028.html"
new file mode 100644
index 0000000000000000000000000000000000000000..42c9dbbf02571eb2526d0b4890c5b4e0562a4601
--- /dev/null
+++ "b/\351\230\231\347\202\234\345\273\267/\344\275\234\344\270\232/20241028.html"
@@ -0,0 +1,108 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        *{
+            margin: 0px;
+            padding: 0px;
+            background-color: black;
+        }
+        /* .box1{
+            width: 100vw;
+            height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            justify-content: space-around;
+            justify-content: space-between;
+            align-items: flex-end;
+            align-items: flex-start;
+            flex-direction: column;
+            flex-wrap: wrap;
+        }
+        .d1{
+            width: 100px;
+            height: 200px;
+            background-color: red;
+        }
+        .d2{
+            width: 50px;
+            height: 100px;
+            background-color: green;
+        }
+        .d3{
+            width: 150px;
+            height: 200px;
+            background-color: purple;
+        }
+        .d4{
+            width: 150px;
+            height: 200px;
+            background-color: yellow;
+        }
+        .d5{
+            width: 150px;
+            height: 200px;
+            background-color: yellowgreen;
+        }
+        .d6{
+            width: 150px;
+            height: 200px;
+            background-color: red;
+        } */
+
+
+        /* 分界线 */
+
+
+        body{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .box{
+            width: 100px;
+            height: 100px;
+            background-color: white;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            
+        }
+        .d1{
+            border-radius: 50px;
+            width: 15px;
+            height: 15px;
+            background-color: black;
+        }
+        .d2{
+            border-radius: 50px;
+            width: 15px;
+            height: 15px;
+            background-color: black;
+        }
+    </style>
+</head>
+<body>
+    <!-- <div class="box1">
+        <div class="d1"></div>
+        <div class="d2"></div>
+        <div class="d3"></div>
+        <div class="d4"></div>
+        <div class="d5"></div>
+        <div class="d6"></div>
+    </div> -->
+
+
+    <!-- 分界线 -->
+
+
+    <div class="box">
+        <div class="d1"></div>
+        <div class="d2"></div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\230\231\347\202\234\345\273\267/\350\257\276\345\240\202\347\254\224\350\256\260/20241028.md" "b/\351\230\231\347\202\234\345\273\267/\350\257\276\345\240\202\347\254\224\350\256\260/20241028.md"
new file mode 100644
index 0000000000000000000000000000000000000000..f57c11e8cc37eece77a41d8f5e00ca0639008318
--- /dev/null
+++ "b/\351\230\231\347\202\234\345\273\267/\350\257\276\345\240\202\347\254\224\350\256\260/20241028.md"
@@ -0,0 +1,145 @@
+# flex布局
+
+1. flex的优势
++ flex 布局的子元素不会脱离文档流，很好地遵从了“流的特性”
++ flex 是一种现代的布局方式，是 W3C 第一次提供真正用于布局的 CSS 规范。 flex 非常提供了丰富的属性，非常灵活，让布局的实现更佳多样化，且方便易用
+
+2. 主轴和侧轴
++ 主轴：flex容器的主轴，默认是水平方向，从左向右
++ 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向，从上往下
+
+3. 声明定义
++ 使用 `display:flex` 或 `display:inline-flex` 声明一个**父容器**为弹性盒子。此时，这个父容器里的子元素们，会遵循弹性布局
+
+4. ### flex-direction 属性
+
+`flex-direction`：用于设置盒子中**子元素**的排列方向。属性值可以是：
+
+| 属性值 | 描述 |
+|:-------------|:-------------|
+| row | 从左到右水平排列子元素（默认值） |
+|column|从上到下垂直排列子元素|
+| row-reverse |从右向左排列子元素 |
+|column-reverse|从下到上垂直排列子元素|
+
+5. ### flex-wrap 属性
+
+`flex-wrap`：控制子元素溢出时的换行处理
+
+6. ### justify-content 属性
+
+`justify-content`：控制子元素在主轴上的排列方式
+
+7. ### justify-content 属性
+
+- `justify-content: flex-start;` 设置子元素在**主轴上的对齐方式**。属性值可以是：
+    - `flex-start` 从主轴的起点对齐（默认值）
+    - `flex-end` 从主轴的终点对齐
+    - `center` 居中对齐
+    - `space-around` 在父盒子里平分
+    - `space-between` 两端对齐 平分
+
+8. ### align-items 属性
+
+`align-items`：设置子元素在**侧轴上的对齐方式**。属性值可以是：
+    - `flex-start` 从侧轴开始的方向对齐
+    - `flex-end` 从侧轴结束的方向对齐
+    - `baseline` 基线 默认同flex-start
+    - `center` 中间对齐
+    - `stretch` 拉伸
+
+    9. ### `flex`属性：设置子盒子的权重
+
+代码演示：
+
+```html
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title></title>
+    <style>
+        *{
+            margin: 0;
+            padding: 0;
+            list-style:none;
+        }
+        body{
+            background-color: #eee;
+            font-family: "Microsoft Yahei";
+
+        }
+        section{
+            width: 1000px;
+            margin:50px auto;
+        }
+        section h3{
+            font-size:22px;
+            font-weight: normal;
+        }
+
+        ul{
+            border: 1px solid #999;
+            background-color: #fff;
+            display: flex;
+
+        }
+
+        ul li{
+            width: 200px;
+            height: 200px;
+            background: pink;
+            margin:10px;
+
+        }
+
+        section:nth-child(1) ul li:nth-child(1){
+            flex:1;
+        }
+
+        section:nth-child(1) ul li:nth-child(2){
+            flex:1;
+        }
+
+        section:nth-child(1) ul li:nth-child(3){
+            flex:8;
+        }
+
+        section:nth-child(2) ul li:nth-child(1){
+
+        }
+
+        section:nth-child(2) ul li:nth-child(2){
+            flex:1;
+        }
+
+        section:nth-child(2) ul li:nth-child(3){
+           flex:4;
+        }
+
+
+    </style>
+</head>
+<body>
+<section>
+    <h3>伸缩比例:flex</h3>
+    <ul>
+        <li>1</li>
+        <li>2</li>
+        <li>3</li>
+    </ul>
+</section>
+
+<section>
+    <h3>伸缩比例:flex</h3>
+    <ul>
+        <li>1</li>
+        <li>2</li>
+        <li>3</li>
+    </ul>
+</section>
+
+
+</body>
+</html>
+```
\ No newline at end of file
