diff --git "a/\347\216\213\350\212\267\345\256\201/\347\254\224\350\256\260/20241028-flex\345\270\203\345\261\200.md" "b/\347\216\213\350\212\267\345\256\201/\347\254\224\350\256\260/20241028-flex\345\270\203\345\261\200.md"
new file mode 100644
index 0000000000000000000000000000000000000000..b72200e575d0cd371ac2a85887412736babe531d
--- /dev/null
+++ "b/\347\216\213\350\212\267\345\256\201/\347\254\224\350\256\260/20241028-flex\345\270\203\345\261\200.md"
@@ -0,0 +1,350 @@
+## flex布局（父项）
+
+弹性布局（任何一个盒子都可以指定为flex布局）
+
+设了flex布局后，子元素的float，clear和vertical-align属性将失效
+
+**布局原理：给父盒子添加flex属性，来控制子盒子的位置和排列方式**
+
+## 常见属性：
+
+##### 1.flex-direction:设置主轴的方向（默认x为主轴，y为侧轴，可设y轴为主轴，那么x轴为侧轴）
+
+- **row（默认从左往右,x轴）**
+
+- row-reverse(右往左)
+
+- **column(从上往下，y轴)**
+
+- column-reverse(从下往上)
+
+
+
+##### 2.justify-content:设置主轴上的子元素排列方式（定义对齐方式，默认为x轴）
+
+- flex-start(默认从头部开始，如果主轴是x，则从左往右)
+
+- flex-end(从尾部开始排列)
+
+- **center（在主轴居中对齐，主轴是x，则水平居中）**
+
+- **space-around(平分剩余空间)**
+
+- **space-between(先贴两边再平分剩余空间)**重要！！
+
+
+
+##### 3.flex-wray:设置子元素是否换行（flex中默认的子元素是不换行的）
+
+- nowrap(默认不换行)
+
+- wray(换行)
+
+
+
+##### 4.align-content:侧轴的排列方式（多行，子轴出现**换行情况**）
+
+- flex-start(从上到下)
+
+- flex-end(从下到上)
+
+- center（在侧轴中间显示）
+
+- **space-around(子项在侧轴平分剩余空间)**
+
+- space-between(子项在侧轴先分布在两头，在平分剩余空间)
+
+- stretch(拉伸，子元素高度平分父元素高度)
+
+
+
+##### 5.align-items:设置侧轴的排列方式（单行，默认y轴）
+
+- flex-start(从上到下)
+- flex-end(从下到上)
+- **center（侧轴垂直居中）**重要！！
+- stretch(拉伸 少用 盒子不要给高度)
+
+
+
+## 练习
+
+### 效果：
+
+
+
+### 代码：
+
+```
+
+
+
+
+
+ Document
+
+
+
+
+
+
+```
+
+### 效果：
+
+
+
+### 代码：
+
+```
+
+
+
+
+
+ Document
+
+
+
+
+
+
+```
+
+### 效果：
+
+
+
+### 代码：
+
+```
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+```
+