diff --git "a/\345\272\267\345\273\272\346\242\205/20241028--\345\212\250\347\224\273\343\200\201Flex\345\270\203\345\261\200\343\200\201\344\270\273\350\275\264\344\276\247\350\275\264\343\200\201flex-direction.md" "b/\345\272\267\345\273\272\346\242\205/20241028--\345\212\250\347\224\273\343\200\201Flex\345\270\203\345\261\200\343\200\201\344\270\273\350\275\264\344\276\247\350\275\264\343\200\201flex-direction.md"
new file mode 100644
index 0000000000000000000000000000000000000000..c41fa4902238676d031981ed13207e72c057a650
--- /dev/null
+++ "b/\345\272\267\345\273\272\346\242\205/20241028--\345\212\250\347\224\273\343\200\201Flex\345\270\203\345\261\200\343\200\201\344\270\273\350\275\264\344\276\247\350\275\264\343\200\201flex-direction.md"
@@ -0,0 +1,158 @@
+# 作业
+## 
+
+
+
+# 笔记
+
+## 动画
+
+动画是CSS3中具有颠覆性的特征，可通过设置**多个节点** 来精确控制一个或一组动画，常用来实现**复杂**的动画效果。
+
+### 1、定义动画的步骤
+
+（1）通过`@keyframes`定义动画；
+
+（2）将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性；
+
+（3）在指定元素里，通过 `animation` 属性调用动画。
+
+在 CSS3 中**定义动画**的时候，**先定义，再调用**：
+
+```javascript
+    定义动画：
+        @keyframes 动画名{
+            from{ 初始状态 }
+            to{ 结束状态 }
+        }
+
+     调用：
+      animation: 动画名称 持续时间；
+```
+
+其中，animation属性的格式如下：
+
+```javascript
+            animation: 定义的动画名称 持续时间  执行次数  是否反向  运动曲线 延迟执行。(infinite 表示无限次)
+
+            animation: move1 1s  alternate linear 3;
+
+            animation: move2 4s;
+```
+animation属性的格式如下：
+
+
+### 2、动画属性
+
+```javascript
+            animation: 定义的动画名称  持续时间  执行次数  是否反向  运动曲线 延迟执行。(infinite 表示无限次)
+
+            animation: move1 1s  alternate linear 3;
+
+            animation: move2 4s;
+```
+
+（1）动画名称：
+
+```javascript
+	animation-name: move;
+```
+
+（2）执行一次动画的持续时间：
+
+```javascript
+	animation-duration: 4s;
+```
+
+备注：上面两个属性，是必选项，且顺序固定。
+
+（3）动画的执行次数：
+
+```javascript
+	animation-iteration-count: 1;       //iteration的含义表示迭代
+```
+
+属性值`infinite`表示无数次。
+
+（3）动画的方向：
+
+```javascript
+	animation-direction: alternate;
+```
+
+属性值：normal 正常，alternate 反向。
+
+（4）动画延迟执行：
+
+
+```javascript
+	animation-delay: 1s;
+```
+
+（5）设置动画结束时，盒子的状态：
+
+```javascript
+	animation-fill-mode: forwards;
+```
+
+属性值： forwards：保持动画结束后的状态（默认），  backwards：动画结束后回到最初的状态。
+
+（6）运动曲线：
+
+```
+	animation-timing-function: ease-in;
+```
+
+属性值可以是：linear   ease-in-out  steps()等。
+
+注意，如果把属性值写成**` steps()`**，则表示动画**不是连续执行**，而是间断地分成几步执行。我们接下来专门讲一下属性值 `steps()`。
+
+### steps()的效果
+
+我们还是拿上面的例子来举例，如果在调用动画时，我们写成：
+
+
+```javascript
+	animation: move2 4s steps(2);
+```
+
+## Flex 布局图文详解
+
+### flex 布局的优势
+
+1、**flex 布局的子元素不会脱离文档流**，很好地遵从了“流的特性”。
+
+2、**flex 是一种现代的布局方式，是 W3C 第一次提供真正用于布局的 CSS 规范**。
+
+### 概念：弹性盒子、子元素（默认从左到右排列-->主轴方向）
+
+- **弹性盒子**：指的是使用 `display:flex` 或 `display:inline-flex` 声明的**父容器**。
+
+- **子元素/弹性元素**：指的是父容器里面的子元素们（父容器被声明为 flex 盒子的情况下）。
+
+### 概念：主轴和侧轴
+
+- 主轴：flex容器的主轴，默认是水平方向，从左向右。
+
+- 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向，从上往下。
+
+## 弹性盒子
+
+### 声明定义
+
+使用 `display:flex` 或 `display:inline-flex` 声明一个**父容器**为弹性盒子。此时，这个父容器里的子元素们，会遵循弹性布局。
+
+备注：一般是用 `display:flex`这个属性。`display:inline-flex`用得较少。
+
+### flex-direction 属性
+
+`flex-direction`：用于设置盒子中**子元素**的排列方向。属性值可以是：
+
+| 属性值 | 描述 |
+|:-------------|:-------------|
+| row | 从左到右水平排列子元素（默认值） |
+|column|从上到下垂直排列子元素|
+| row-reverse |从右向左排列子元素 |
+|column-reverse|从下到上垂直排列子元素|
+
+备注：如果我们不给父容器写`flex-direction`这个属性，那么，子元素默认就是从左到右排列的。
diff --git "a/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/fish.png" "b/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/fish.png"
new file mode 100644
index 0000000000000000000000000000000000000000..d60ff6ecde05412936fd712b7588684c3faf79a2
Binary files /dev/null and "b/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/fish.png" differ
diff --git "a/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/shark2.png" "b/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/shark2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..667e7fd5bd158f95ebfbce25fc5a866b3ad31704
Binary files /dev/null and "b/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/shark2.png" differ
diff --git "a/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\347\206\212.png" "b/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\347\206\212.png"
new file mode 100644
index 0000000000000000000000000000000000000000..5100a19f692cc06c4cdc5007aa3248a155d807c2
Binary files /dev/null and "b/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\347\206\212.png" differ
diff --git "a/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/1\345\210\206\351\222\261\344\270\223\344\272\253.png" "b/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\350\277\207\345\216\273\345\274\217/1\345\210\206\351\222\261\344\270\223\344\272\253.png"
similarity index 100%
rename from "\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/1\345\210\206\351\222\261\344\270\223\344\272\253.png"
rename to "\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\350\277\207\345\216\273\345\274\217/1\345\210\206\351\222\261\344\270\223\344\272\253.png"
diff --git "a/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/J.png" "b/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\350\277\207\345\216\273\345\274\217/J.png"
similarity index 100%
rename from "\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/J.png"
rename to "\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\350\277\207\345\216\273\345\274\217/J.png"
diff --git "a/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/Q.png" "b/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\350\277\207\345\216\273\345\274\217/Q.png"
similarity index 100%
rename from "\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/Q.png"
rename to "\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\350\277\207\345\216\273\345\274\217/Q.png"
diff --git "a/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\345\260\217\347\201\253\347\256\255.gif" "b/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\350\277\207\345\216\273\345\274\217/\345\260\217\347\201\253\347\256\255.gif"
similarity index 100%
rename from "\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\345\260\217\347\201\253\347\256\255.gif"
rename to "\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\350\277\207\345\216\273\345\274\217/\345\260\217\347\201\253\347\256\255.gif"
diff --git "a/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\346\211\213\346\234\272.jpg" "b/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\350\277\207\345\216\273\345\274\217/\346\211\213\346\234\272.jpg"
similarity index 100%
rename from "\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\346\211\213\346\234\272.jpg"
rename to "\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\350\277\207\345\216\273\345\274\217/\346\211\213\346\234\272.jpg"
diff --git "a/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\346\211\213\350\241\250.png" "b/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\350\277\207\345\216\273\345\274\217/\346\211\213\350\241\250.png"
similarity index 100%
rename from "\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\346\211\213\350\241\250.png"
rename to "\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\350\277\207\345\216\273\345\274\217/\346\211\213\350\241\250.png"
diff --git "a/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\346\211\213\350\241\250\347\224\265\350\204\221\346\211\213\346\234\272.gif" "b/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\350\277\207\345\216\273\345\274\217/\346\211\213\350\241\250\347\224\265\350\204\221\346\211\213\346\234\272.gif"
similarity index 100%
rename from "\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\346\211\213\350\241\250\347\224\265\350\204\221\346\211\213\346\234\272.gif"
rename to "\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\350\277\207\345\216\273\345\274\217/\346\211\213\350\241\250\347\224\265\350\204\221\346\211\213\346\234\272.gif"
diff --git "a/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\346\211\221\345\205\213\347\211\214.gif" "b/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\350\277\207\345\216\273\345\274\217/\346\211\221\345\205\213\347\211\214.gif"
similarity index 100%
rename from "\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\346\211\221\345\205\213\347\211\214.gif"
rename to "\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\350\277\207\345\216\273\345\274\217/\346\211\221\345\205\213\347\211\214.gif"
diff --git "a/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\347\201\253\347\256\255.png" "b/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\350\277\207\345\216\273\345\274\217/\347\201\253\347\256\255.png"
similarity index 100%
rename from "\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\347\201\253\347\256\255.png"
rename to "\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\350\277\207\345\216\273\345\274\217/\347\201\253\347\256\255.png"
diff --git "a/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\347\224\265\350\204\221.png" "b/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\350\277\207\345\216\273\345\274\217/\347\224\265\350\204\221.png"
similarity index 100%
rename from "\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\347\224\265\350\204\221.png"
rename to "\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\350\277\207\345\216\273\345\274\217/\347\224\265\350\204\221.png"
diff --git "a/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\351\201\245\351\201\245\351\242\206\345\205\210.gif" "b/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\350\277\207\345\216\273\345\274\217/\351\201\245\351\201\245\351\242\206\345\205\210.gif"
similarity index 100%
rename from "\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\351\201\245\351\201\245\351\242\206\345\205\210.gif"
rename to "\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\350\277\207\345\216\273\345\274\217/\351\201\245\351\201\245\351\242\206\345\205\210.gif"