From c9013ea3631a10360182a9556c5c35a965f50034 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BE=AF=E5=87=A4=E9=98=B3?=
 <14091016+houfengyang@user.noreply.gitee.com>
Date: Wed, 30 Oct 2024 15:26:07 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A8=E7=94=BB=E5=92=8Cflex=E7=AC=94?=
 =?UTF-8?q?=E8=AE=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...45\212\250\347\224\273\345\222\214flex.md" | 126 ++++++++++++++++++
 1 file changed, 126 insertions(+)
 create mode 100644 "\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20241028\345\212\250\347\224\273\345\222\214flex.md"

diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20241028\345\212\250\347\224\273\345\222\214flex.md" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20241028\345\212\250\347\224\273\345\222\214flex.md"
new file mode 100644
index 0000000..5c3c301
--- /dev/null
+++ "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20241028\345\212\250\347\224\273\345\222\214flex.md"
@@ -0,0 +1,126 @@
+# 动画属性
+
+* 概念：
+  动画是CSS3中具有颠覆性的特征，可通过设置**多个节点** 来精确控制一个或一组动画，常用来实现**复杂**的动画效果。
+
+## 定义动画的步骤
+
+（1）通过@keyframes定义动画；
+
+（2）将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性；
+
+（3）在指定元素里，通过 `animation` 属性调用动画
+
+```
+javascript
+    定义动画：
+        @keyframes 动画名{
+            from{ 初始状态 }
+            to{ 结束状态 }
+        }
+
+     调用：
+      animation: 动画名称 持续时间；
+```
+
+* animation属性的格式如下：
+
+```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()等。
+
+# flex图文详解
+
+* 概念：在布局方面做了非常大的改进，使得我们对**多个元素之间**的布局排列变得十分灵活，适应性非常强。其强大的伸缩性和自适应性，在网页开中可以发挥极大的作用。
+
+## flex 布局的优势
+
+1、**flex 布局的子元素不会脱离文档流**，很好地遵从了“流的特性”。
+
+但你如果用 float 来做布局，float 属性的元素会脱离文档流，而且会涉及到各种 BFC、清除浮动的问题。浮动相关的问题，比较麻烦，所以也成了面试必问的经典题目。但有了 flex 布局之后，这些问题都不存在的。
+
+2、**flex 是一种现代的布局方式，是 W3C 第一次提供真正用于布局的 CSS 规范**。 flex 非常提供了丰富的属性，非常灵活，让布局的实现更佳多样化，且方便易用。
+
+flex 唯一的缺点就在于，它不支持低版本的 IE 浏览器。
+
+### 属性
+
+ justify-content:  space-around;/
+   在每行上均匀分配项目，第一个项目与行首对齐，最后一个项目与行尾对齐 */
+ justify-content: space-between; /* 在每行上均匀分配项目，每个项目周围分配相同的空间 */
+justify-content: center;
+
+### 概念：弹性盒子、子元素
+
+在讲 flex 的知识点之前，我们事先约定两个概念：
+
+- **弹性盒子**：指的是使用 `display:flex` 或 `display:inline-flex` 声明的**父容器**。
+- **子元素/弹性元素**：指的是父容器里面的子元素们（父容器被声明为 flex 盒子的情况下）。
+
+### 概念：主轴和侧轴
+
+在上面的“初体验”例子中，我们发现，弹性盒子里面的子元素们，默认是从左至右排列的，这个方向，代表的就是主轴的方向。
+
+在此，我们引入主轴和侧轴的概念。
+
+- 主轴：flex容器的主轴，默认是水平方向，从左向右。
+- 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向，从上往下。
+
+P主轴和侧轴并不是固定不变的，可以通过 `flex-direction` 更换方向
-- 
Gitee