diff --git "a/\351\231\210\344\276\235\346\254\243/20241104--flex\345\270\203\345\261\200.md" "b/\351\231\210\344\276\235\346\254\243/20241104--flex\345\270\203\345\261\200.md"
new file mode 100644
index 0000000000000000000000000000000000000000..678d088733bee1bbeeb3185d066f2bacf4077d73
--- /dev/null
+++ "b/\351\231\210\344\276\235\346\254\243/20241104--flex\345\270\203\345\261\200.md"
@@ -0,0 +1,424 @@
+## 作业
+1. 
+2. 
+3. 
+4. 
+5. 
+6. 
+## 代码
+1.
+```css
+ body{
+ background-color: black;
+ }
+ .all{
+ display: flex;
+ background-color: white;
+ }
+ .d1{
+ width: 100px;
+ height: 200px;
+ background-color: pink;
+ }
+ .d2{
+ width: 165px;
+ height: 150px;
+ background-color: yellowgreen;
+ }
+ .d3{
+ width: 100px;
+ height: 100px;
+ background-color: blue;
+ }
+
+```
+2.
+```css
+ .all{
+ display: flex;
+ background-color: white;
+ justify-content: center;
+ justify-content: space-around;
+ }
+```
+3.
+```CSS
+ .all{
+ display: flex;
+ background-color: white;
+ align-items: center; /* 居中对齐 */
+ /* align-items: flex-start; */ /* 顶部对齐 */
+ /* align-items: flex-end; */ /* 底部对齐 */
+ }
+```
+5.
+```CSS
+ .all{
+ display: flex;
+ background-color: white;
+ flex-wrap: wrap;
+ align-content: baseline;
+ }
+```
+6. 附加题
+```css
+ body{
+ display: flex;
+ }
+ div{
+ width: 100px;
+ margin: 20px;
+ height: 100px;
+ background-color: palevioletred;
+ }
+ @media(max-width:500px){
+
+ body{
+ display: flex;
+ flex-direction: column;
+ }
+ div:nth-child(n+6){
+ display: none;
+ }
+ }
+```
+
+## flex 布局
+
+### 概念：弹性盒子、子元素
+
+- **弹性盒子**：指的是使用 `display:flex` 或 `display:inline-flex` 声明的**父容器**。
+
+- **子元素/弹性元素**：指的是父容器里面的子元素们（父容器被声明为 flex 盒子的情况下）。
+
+### 概念：主轴和侧轴
+
+- 弹性盒子里面的子元素们，默认是从左至右排列的，这个方向，代表的就是主轴的方向。
+ - 主轴（X轴）：flex容器的主轴，默认是水平方向，从左向右
+ - 侧轴（Y轴）：与主轴垂直的轴称作侧轴，默认是垂直方向，从上往下。
+
+PS：主轴和侧轴并不是固定不变的，可以通过 `flex-direction` 更换方向
+
+## 弹性盒子
+- 定义：使用 `display:flex` 或 `display:inline-flex` 声明一个**父容器**为弹性盒子。此时，父容器里的子元素们，会遵循弹性布局。
+
+
+### flex-direction 属性：用于设置盒子中**子元素**的排列方向
+| 属性值 | 描述 |
+|:-------------|:-------------|
+| row | 从左到右水平排列子元素（默认值） |
+|column|从上到下垂直排列子元素|
+| row-reverse |从右向左排列子元素 |
+|column-reverse|从下到上垂直排列子元素|
+
+```css
+ section:nth-child(1) ul{
+ overflow: hidden; /* 清除浮动 */
+ }
+ section:nth-child(1) ul li{
+ float: left;
+ }
+ /* 设置伸缩盒子*/
+ section:nth-child(2) ul{
+ display: flex;
+ }
+
+ section:nth-child(3) ul{
+ /* 设置伸缩布局*/
+ display: flex;
+ /* 设置主轴方向*/
+ flex-direction: row;
+ }
+
+ section:nth-child(4) ul{
+ /* 设置伸缩布局*/
+ display: flex;
+ /* 设置主轴方向 :水平翻转*/
+ flex-direction: row-reverse;
+ }
+```
+
+### `flex-wrap`：控制子元素溢出时的换行处理。
+1. 竖直水平对齐
+```css
+justify-content:center;
+align-items:center;
+height:100px;
+```
+
+2. flex：1 1 auto: 表示元素可以增长和缩小以适应容器的大小，其初始大小由内容决定
+
+- 这个属性的值分别对应了这三个属性：
+
+ - flex-grow: 增长的比例是相等的。按照这个比例分配多余的空间。
+
+ - flex-shrink: 缩小的比例是相等的。按照这个比例缩小以适应容器。
+
+ - flex-basis: 这个值表示在分配多余空间之前，元素的默认大小。auto 表示元素的初始大小由其内容或宽度/高度属性决定。
+
+
+
+
+## 弹性元素
+
+### 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` 拉伸
+
+
+### `flex`属性：设置子盒子的权重
+```html
+
+
+
+
+
+```
+
+## 色子的代码
+```html
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
+
+
+```
\ No newline at end of file
diff --git "a/\351\231\210\344\276\235\346\254\243/images/1.wmv" "b/\351\231\210\344\276\235\346\254\243/images/1.wmv"
new file mode 100644
index 0000000000000000000000000000000000000000..c4550594fba160ce8c2b530da0c9c1ab2650709f
Binary files /dev/null and "b/\351\231\210\344\276\235\346\254\243/images/1.wmv" differ
diff --git "a/\351\231\210\344\276\235\346\254\243/images/\345\233\276\347\211\2071.png" "b/\351\231\210\344\276\235\346\254\243/images/\345\233\276\347\211\2071.png"
new file mode 100644
index 0000000000000000000000000000000000000000..7e34bf80d3e3bf4de1ff49fbecb1df1881b44cc2
Binary files /dev/null and "b/\351\231\210\344\276\235\346\254\243/images/\345\233\276\347\211\2071.png" differ
diff --git "a/\351\231\210\344\276\235\346\254\243/images/\345\233\276\347\211\2072.png" "b/\351\231\210\344\276\235\346\254\243/images/\345\233\276\347\211\2072.png"
new file mode 100644
index 0000000000000000000000000000000000000000..93b19de0747848ce3d1953c1453da26e57d5d43f
Binary files /dev/null and "b/\351\231\210\344\276\235\346\254\243/images/\345\233\276\347\211\2072.png" differ
diff --git "a/\351\231\210\344\276\235\346\254\243/images/\345\233\276\347\211\2073.png" "b/\351\231\210\344\276\235\346\254\243/images/\345\233\276\347\211\2073.png"
new file mode 100644
index 0000000000000000000000000000000000000000..250a33b62c209253fef40d5293a5cf2a4223cb1c
Binary files /dev/null and "b/\351\231\210\344\276\235\346\254\243/images/\345\233\276\347\211\2073.png" differ
diff --git "a/\351\231\210\344\276\235\346\254\243/images/\345\233\276\347\211\2074.png" "b/\351\231\210\344\276\235\346\254\243/images/\345\233\276\347\211\2074.png"
new file mode 100644
index 0000000000000000000000000000000000000000..84236897742ab75371e4222a9bc25db403eb98e2
Binary files /dev/null and "b/\351\231\210\344\276\235\346\254\243/images/\345\233\276\347\211\2074.png" differ
diff --git "a/\351\231\210\344\276\235\346\254\243/images/\345\233\276\347\211\2075.png" "b/\351\231\210\344\276\235\346\254\243/images/\345\233\276\347\211\2075.png"
new file mode 100644
index 0000000000000000000000000000000000000000..cc39bb165a0c9efc1223b16190c56504dbb02b05
Binary files /dev/null and "b/\351\231\210\344\276\235\346\254\243/images/\345\233\276\347\211\2075.png" differ