diff --git "a/\345\220\264\344\275\263\351\242\226/2024.11.4frlx.md" "b/\345\220\264\344\275\263\351\242\226/2024.11.4frlx.md"
new file mode 100644
index 0000000000000000000000000000000000000000..5f78cebaa08e056ba3fd7db9385c866e3e7b4991
--- /dev/null
+++ "b/\345\220\264\344\275\263\351\242\226/2024.11.4frlx.md"
@@ -0,0 +1,266 @@
+# 弹性盒子flex
+使用`display:flex`或`display:inline-flex`声明一个父容器为弹性盒子，此时子元素们会遵循弹性布局
+#### flex-direction属性
+用于设置盒子中子元素的排列方向
++ `row`：从左到右水平排列
++ `column`：从上到下垂直排列
++ `row-reverse`：从右向左排列
++ `column-reverse`：从下到上垂直排列
+如果我们不给父容器写`flex-direction`这个属性，那么，子元素默认就是从左到右排列的
+
+#### flex-wrap属性
+控制子元素溢出时的换行处理
+
+### 弹性元素
+#### justify-content属性
+设置子元素在主轴上的对齐方式
++ `flex-start`：从主轴的起点对齐（默认）
++ `flex-end`：从主轴的终点对齐
++ `center`：居中对齐
++ `space-around`：在父盒子里平分
++ `space-between`：两端对齐平分
+
+#### align-items属性
+设置子元素在侧轴上的对齐方式
++ `flex-start`：从侧轴开始的方向对齐
++ `flex-end`：从侧轴结束的方向对齐
++ `baseline`：基线（默认同flex-start）
++ `center`：中间对齐
++ `stretch`：拉伸
+# 练习
+1. 筛子效果图
+![20241105213526](sjt5yxtw4.hn-bkt.clouddn.com/20241105213526.png)
+
+css关键代码
+```css
+        body{
+            display: flex;
+        }
+        ul{
+            list-style: none;
+        }
+        div{
+            width: 100px;
+            height: 100px;
+            border: 1px solid red;
+        }
+        .no1{
+            width: 100px;
+            height: 100px;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            list-style: none;
+            justify-content: space-around;
+            align-items: center;
+        }
+        .no2{
+            width: 100px;
+            height: 50px;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            list-style: none;
+            justify-content: space-around;
+            align-items: center;
+        }
+        .no3{
+            width: 100px;
+            height: 35px;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            list-style: none;
+            justify-content: space-around;
+            align-items: center;
+        }
+        li{
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background-color: rgb(0, 0, 0);
+        }
+        .d2 ul{
+            flex-direction: column;
+        }
+        .d3 ul {
+            flex-direction: column;
+        }
+        .d3 ul li:nth-child(1){
+            margin-left: 5px;
+            align-self: flex-start;
+        }
+        .d3 ul li:nth-child(3){
+            margin-right: 5px;
+            align-self: flex-end;
+        }
+        .d4 .no1{
+            flex-direction: column;
+        }
+        .d5 .no1{
+            flex-direction: column;
+        }
+        .d6 .no1{
+            flex-direction: column;
+        }
+        .d7 .no1{
+            flex-direction: column;
+        }
+        .d8 .no1{
+            flex-direction: column;
+        }
+        .d9 .no1{
+            flex-direction: column;
+        }
+
+```
+2. 酷狗音乐布局效果图
+
+![酷狗布局](sjt5yxtw4.hn-bkt.clouddn.com/酷狗布局.gif)
+
+css关键代码
+```css
+        .dd{
+            display: flex;
+            justify-content: space-around;
+           
+        }
+        .d1{
+            width: 150px;
+            height: 210px;
+        }
+        .d1-1,.d2-1,.d3-1,.d4-1,.d5-1,.d6-1,.d7-1,.d8-1{
+            width: 150px;
+            height: 150px;
+            border-radius: 10%;
+            position: relative;
+        }
+        p{
+            font-size: 14px;
+            color: white;
+            display: inline;
+            margin: 0;
+            padding: 0;
+            position: absolute;
+            left: 50px;
+            bottom: 0;
+        }
+        img{
+            width: 20px;
+            height: 20px;
+            position: absolute;
+            left: 10px;
+            bottom: 0;
+        }
+        .d1-1{
+            background: url(./images/flex-01.jpg) no-repeat;
+        }
+        .d2-1{
+            background: url(./images/flex-02.jpg) no-repeat;
+        }
+        .d3-1{
+            background: url(./images/flex-03.jpg) no-repeat;
+        }
+        .d4-1{
+            background: url(./images/flex-04.jpg) no-repeat;
+        }
+        .d5-1{
+            background: url(./images/flex-05.jpg) no-repeat;
+        }
+        .d6-1{
+            background: url(./images/flex-06.jpg) no-repeat;
+        }
+        .d7-1{
+            background: url(./images/flex-07.jpg) no-repeat;
+        }
+        .d8-1{
+            background: url(./images/flex-08.jpg) no-repeat;
+        }
+```
+
+3. 今日头条效果图
+
+![20241105214255](sjt5yxtw4.hn-bkt.clouddn.com/20241105214255.png)
+
+css关键代码
+```css
+        .all{
+            width: 400px;
+            height: 700px;
+            /* background-color: aquamarine; */
+            border: 1px solid ;
+        }
+        .top{
+            width: 400px;
+            height: 50px;
+            background-color: white;
+        }
+        ul{
+            margin: 0;
+            padding: 0;
+            list-style: none;
+            padding-top: 10px;
+            padding-left: 10px;
+            padding-right: 10px;
+        }
+        .top-im{
+            width: 25px;
+            height: 25px;
+        }
+        .lef{
+            float: left;
+        }
+        .rig{
+            float: right;
+        }
+        .si{
+            font-size: 20px;
+            font-weight: 600;
+            margin-left: 5px;
+        }
+        .huan{
+            font-size: 18px;
+            font-weight: 400;
+            color: red;
+        }
+        img{
+            width: 200px;
+            height: 130px;
+            float: left;
+            margin-right: 10px;
+        }
+        
+        .ping{
+            width: 70px;
+            height: 30px;
+            line-height: 30px;
+            text-align: center;
+            background-color: rgb(255, 0, 60,0.2);
+            color: red;
+            border-radius: 8%;
+            margin-bottom: 10px;
+            float: left;
+        }
+        h3{
+            margin: 0;
+            margin-bottom: 10px;
+            padding-top: 5px;
+            font-weight: 500;
+        }
+        h4{
+            margin: 0;
+            display: inline;
+            color: gray;
+            font-weight: 400;
+        }
+        .d1{
+            width: 400px;
+            height: 130px;
+            margin-bottom: 25px;
+        }
+        .d1-1{
+            width: 190px;
+            height: 30px;
+            float: left;
+        }
+```
\ No newline at end of file