From 87740ab13d9c8b6777dd69f02862781f8814e39b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=91=A8=E7=91=9E=E5=87=AF?= <123456>
Date: Wed, 6 Nov 2024 10:41:24 +0800
Subject: [PATCH] flex

---
 .../20241104\342\200\224\342\200\224flex.md"  | 133 ++++++++++++++++++
 1 file changed, 133 insertions(+)
 create mode 100644 "\345\221\250\347\221\236\345\207\257/20241104\342\200\224\342\200\224flex.md"

diff --git "a/\345\221\250\347\221\236\345\207\257/20241104\342\200\224\342\200\224flex.md" "b/\345\221\250\347\221\236\345\207\257/20241104\342\200\224\342\200\224flex.md"
new file mode 100644
index 0000000..5249b0d
--- /dev/null
+++ "b/\345\221\250\347\221\236\345\207\257/20241104\342\200\224\342\200\224flex.md"
@@ -0,0 +1,133 @@
+# flex布局
+**flex布局的优势**
+* flex布局的子元素不会脱离文档流
+* flex是一种现代的布局方式，是W3C第一次提供真正用于布局的CSS规范
+## 概念：弹性盒子、子元素
+- **弹性盒子**：指的是使用 `display:flex` 或 `display:inline-flex` 声明的**父容器**。
+
+- **子元素/弹性元素**：指的是父容器里面的子元素们（父容器被声明为 flex 盒子的情况下）。
+
+## 概念：主轴和侧轴
+- 主轴：flex容器的主轴，默认是水平方向，从左向右。
+
+- 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向，从上往下。
+
+PS：主轴和侧轴并不是固定不变的，可以通过 `flex-direction` 更换方向
+
+## 弹性盒子
+### 声明定义：
+使用 `display:flex` 或 `display:inline-flex` 声明一个**父容器**为弹性盒子。此时，这个父容器里的子元素们，会遵循弹性布局。
+
+备注：一般是用 `display:flex`这个属性。`display:inline-flex`用得较少。
+### flex-direction 属性
+`flex-direction`：用于设置盒子中**子元素**的排列方向。
+
+|属性值|描述|
+|:-|-:|
+|row|从左到右水平排列子元素（默认值）|
+|column|从上到下垂直排列子元素|
+|row-reverse|从右到左排列子元素|
+|column-reverse|从下到上垂直排列子元素|
+
+备注：如果我们不给父容器写`flex-direction`这个属性，那么，子元素默认就是从左到右排列的。
+
+## flex-wrap属性
+`flex-wrap`：控制子元素溢出时的换行处理。
+
+## justify-content属性
+`justify-content`：控制子元素在主轴上的排列方式。
+
+## 弹性元素
+### justify-content属性
+`justify-content: flex-start;` 设置子元素在**主轴上的对齐方式**。属性值可以是：
+
+- `flex-start` 从主轴的起点对齐（默认值）
+- `flex-end` 从主轴的终点对齐
+- `center` 居中对齐
+- `space-around` 在父盒子里平分
+- `space-between` 两端对齐 平分
+
+### align-items属性
+`align-items`：设置子元素在**侧轴上的对齐方式**。属性值可以是：
+    - `flex-start` 从侧轴开始的方向对齐
+    - `flex-end` 从侧轴结束的方向对齐
+    - `baseline` 基线 默认同flex-start
+    - `center` 中间对齐
+    - `stretch` 拉伸
+
+# 作业
+
+# 效果
+
+<img src="https://pic.imgdb.cn/item/672ae28cd29ded1a8c6ce241.gif" alt="GIF.gif">
+
+# 代码
+```html
+<style>
+        body{
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+        }
+        .q1{
+            width: 100px;
+            height: 100px;
+            background-color: rgb(207, 20, 51);
+        }
+        .w2{
+            width: 100px;
+            height: 100px;
+            background-color: rgb(168, 251, 3);
+        }
+        .e3{
+            width: 100px;
+            height: 100px;
+            background-color: rgb(0, 255, 38);
+        }
+        .r4{
+            width: 100px;
+            height: 100px;
+            background-color: rgb(254, 155, 5);
+        }
+        .t5{
+            width: 100px;
+            height: 100px;
+            background-color: rgb(7, 249, 168);
+        }
+        .y6{
+            width: 100px;
+            height: 100px;
+            background-color: rgb(10, 17, 97);
+        }
+        .u7{
+            width: 100px;
+            height: 100px;
+            background-color: rgb(140, 63, 89);
+        }
+        .i8{
+            width: 100px;
+            height: 100px;
+            background-color: rgb(152, 70, 147);
+        }
+        .o9{
+            width: 100px;
+            height: 100px;
+            background-color:rgb(43, 21, 5);
+        }
+        .p0{
+            width: 100px;
+            height: 100px;
+            background-color: rgb(187, 19, 19);
+        }
+        @media (max-width:600px) {
+            .y6,.u7,.i8,.o9,.p0{
+                display: none;
+            }
+            body{
+                flex-direction: column;
+
+            }
+            
+        }
+    </style>
+```
\ No newline at end of file
-- 
Gitee