diff --git "a/\345\210\230\347\201\277/20241104-Flex\345\270\203\345\261\200.md" "b/\345\210\230\347\201\277/20241104-Flex\345\270\203\345\261\200.md"
new file mode 100644
index 0000000000000000000000000000000000000000..1ed22f1841766f3d72dc72f8f1a19590720b0d2a
--- /dev/null
+++ "b/\345\210\230\347\201\277/20241104-Flex\345\270\203\345\261\200.md"
@@ -0,0 +1,863 @@
+## 弹性盒子
+
+### 声明定义
+使用 `display:flex` 或 display:inline-flex 声明一个**父容器**为弹性盒子
+
+### flex-direction属性
+用于设置盒子元素中**子元素**的排列方向
+
+属性值：
+- row 从左到右水平排列子元素（默认）
+- column 从上到下垂直排列子元素
+- row-reverse 从右向左排列
+- column-reverse 从下到上垂直排列子元素
+
+### flex-wrap属性
+控制子元素溢出时的换行处理
+
+### justify-content属性
+控制子元素在主轴上的排列方式
+
+
+## 弹性元素
+
+### justify-content属性
+设置子元素在主轴上的对齐方式
+
+属性值：
+- `flex-start` 从主轴的起点对齐（默认值）
+- `flex-end` 从主轴的终点对齐
+- `center` 居中对齐
+- `space-around` 在父盒子里平分
+- `space-between` 两端对齐 平分
+
+### align-items属性
+设置子元素在侧轴上的对齐方式
+
+属性值：
+- `flex-start` 从侧轴开始的方向对齐
+- `flex-end` 从侧轴结束的方向对齐
+- `baseline` 基线 默认同flex-start
+- `center` 中间对齐
+- `stretch` 拉伸
+
+## 响应式布局
+1. flex
+2. grid
+3. 列布局
+4.媒体查询
+
+## 媒体查询
+根据设备的类型或特定特征和参数（例如屏幕分辨率和浏览器窗口宽度）来应用不同的样式
+
+通常通过@media和@import at-rules在CSS中使用，或者通过HTML元素的media=属性来指定特定的媒体类型
+
+```css
+/* 应用于屏幕的样式 */
+@media screen {
+/* 样式代码 */
+}
+```
+
+例如
+```css
+/* 当屏幕宽度小于等于600px时应用此样式 */
+@media screen and (max-width: 600px){
+    body{
+        background-color: pink; 
+    }
+}
+/* 当屏幕宽度大于600px时应用此样式 */
+@media screen and (min-width: 601px){
+    body{
+        background-color: red; 
+    }
+}
+```
+
+# 作业（flex布局）
+
+## 1
+### 效果图
+![20241106110829](sjyniuybm.hn-bkt.clouddn.com/20241106110829.png)
+### 代码
+```css
+.box{
+    width: 300px;
+    height: 300px;
+    display: flex;
+}
+.d1{
+    width: 100px;
+    height: 100px;
+    background-color: red;
+}
+.d2{
+    width: 100px;
+    height: 150px;
+    background-color: blue;
+}
+.d3{
+    width: 100px;
+    height: 200px;
+    background-color: pink;
+}
+```
+
+## 2
+### 效果图
+![20241106110932](sjyniuybm.hn-bkt.clouddn.com/20241106110932.png)
+### 代码
+```css
+ .box{
+    display: flex;
+    justify-content: center;
+    justify-content: space-between;
+    justify-content: space-around;
+}
+.d1{
+    width: 100px;
+    height: 100px;
+    background-color: red;  
+}
+.d2{
+    width: 100px;
+    height: 150px;
+    background-color: blue;
+}
+.d3{
+    width: 100px;
+    height: 200px;
+    background-color: pink;
+}
+```
+
+## 3
+### 效果图
+![20241106111015](sjyniuybm.hn-bkt.clouddn.com/20241106111015.png)
+### 代码
+```css
+.box{
+    height: 600px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    /* justify-content: flex-end; */
+}
+.d1{
+    width: 100px;
+    height: 100px;
+    background-color: red;
+}
+.d2{
+    width: 150px;
+    height: 150px;
+    background-color: blue;
+}
+.d3{
+    width: 200px;
+    height: 200px;
+    background-color: pink;
+}
+```
+
+## 5
+### 效果图
+![20241106111133](sjyniuybm.hn-bkt.clouddn.com/20241106111133.png)
+### 代码
+```css
+.box{
+    height: 800px;
+    display: flex;
+    flex-wrap: wrap;
+    align-content: flex-start;
+}
+.d1{
+    width: 300px;
+    height: 100px;
+    background-color: red;
+    
+}
+.d2{
+    width: 150px;
+    height: 150px;
+    background-color: blue;
+}
+.d3{
+    width: 200px;
+    height: 200px;
+    background-color: pink;
+}
+```
+
+## 6骰子
+### 效果图
+![20241106111219](sjyniuybm.hn-bkt.clouddn.com/20241106111219.png)
+### 代码
+```css
+.box{
+    width: 950px;
+    display: flex;
+    justify-content: space-between;
+}
+[class^='d']{
+    width: 90px;
+    height: 90px;
+    border: 2px solid red;
+    display: flex;
+}
+[class^="s"]{
+    width: 15px;
+    height: 15px;
+    border: 1px solid ;
+    background: #000;
+    border-radius: 50%;
+}
+.d1{
+    justify-content: center;
+    align-items: center;
+}
+.d2{
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+.d3{
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+.s3-1{
+    margin-left: -44px;
+}
+.s3-3{
+    margin-left: 44px;
+}
+.hidden{
+    height: 12px;
+}
+[class^="h4"]{
+    height: 90px;
+    width: 45px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+[class^="h5"]{
+    height: 90px;
+    width: 30px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+[class^="h6"]{
+    height: 90px;
+    width: 45px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+[class^="h7"]{
+    height: 90px;
+    width: 30px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+[class^="h8"]{
+    height: 90px;
+    width: 30px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+[class^="h9"]{
+    height: 90px;
+    width: 30px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+```
+
+## 7超出隐藏盒子
+### 效果图
+![盒子](sjyniuybm.hn-bkt.clouddn.com/盒子.gif)
+### 代码
+```css
+ .box{
+    width: 1000px;
+    display: flex;
+}
+[class^="d"]{
+    width: 100px;
+    height: 100px;
+}
+.d1{
+    background-color: red;
+}
+.d2{
+    background-color: blue;
+}
+.d3{
+    background-color: pink;
+}
+.d4{
+    background-color: rgb(194, 40, 65);
+}
+.d5{
+    background-color: green;
+}
+.dh6{
+    background-color: greenyellow;
+}
+.dh7{
+    background-color: rgb(192, 246, 255);
+}
+.dh8{
+    background-color: rgb(255, 192, 252);
+}
+.dh9{
+    background-color: rgb(251, 255, 192);
+}
+.dh10{
+    background-color: yellow;
+}
+@media screen and (max-width: 500px) {
+    .box{
+        flex-direction: column;
+    }
+    [class^="dh"]{
+        background: transparent;
+    }
+}
+```
+
+# flex综合练习
+
+## 酷狗播放
+### 效果图
+![酷狗](sjyniuybm.hn-bkt.clouddn.com/酷狗.gif)
+### 代码
+```css
+ [class^="d"] {
+    display: flex;
+    justify-content: space-around;
+}
+
+[class^="i"] {
+    width: 150px;
+    height: 200px;
+    position: relative;
+    margin-right: 20px;
+}
+
+img {
+    border-radius: 9px;
+}
+
+.playAll {
+    height: 24px;
+    position: absolute;
+    top: 120px;
+    left: 13px;
+    color: white;
+    line-height: 20px;
+    font-size: 15px;
+}
+
+.playAll img {
+    width: 14px;
+    height: 20px;
+    vertical-align: bottom;
+    margin-right: 5px;
+}
+```
+
+## 今日头条
+### 效果图
+![20241106111848](sjyniuybm.hn-bkt.clouddn.com/20241106111848.png)
+### 代码
+```css
+ * {
+    margin: 0;
+    padding: 0;
+}
+
+.box {
+    width: 400px;
+    height: 700px;
+    margin: 0px auto;
+}
+
+.d1 {
+    width: 400px;
+    height: 60px;
+}
+
+.s1 {
+    width: 70px;
+    height: 55px;
+    font-size: 25px;
+    font-weight: 500;
+    line-height: 55px;
+}
+
+.s1 img {
+    width: 30px;
+    height: 30px;
+    vertical-align: middle;
+    margin-right: 10px;
+}
+
+.s2 {
+    color: #ff0000;
+    margin-left: 180px;
+}
+
+.s2 img {
+    width: 20px;
+    height: 20px;
+    vertical-align: middle;
+    margin-right: 5px;
+}
+
+.d2 {
+    width: 400px;
+    height: 124px;
+    display: flex;
+    margin-bottom: 20px;
+}
+
+.d3 img {
+    width: 160px;
+    height: 124px;
+    vertical-align: bottom;
+    margin-right: 10px;
+}
+
+.d4 {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.d4 .a1 {
+    width: 75px;
+    height: 30px;
+    color: #f14143;
+    background-color: #fff3f2;
+    text-align: center;
+    line-height: 30px;
+    border-radius: 7px;
+}
+
+.d4 span {
+    color: gray;
+}
+
+.d4 span a {
+    margin-left: 50px;
+}
+```
+
+## 布局
+### 效果图
+![20241106111915](sjyniuybm.hn-bkt.clouddn.com/20241106111915.png)
+### 代码
+```css
+  * {
+    margin: 0;
+    padding: 0;
+    background-color: #90c08d;
+}
+
+.box {
+    width: 800px;
+    height: 600px;
+    background-color: #ccd2f7;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    margin: 20px auto;
+    border: 1px solid;
+}
+
+.up {
+    width: 760px;
+    height: 120px;
+    background-color: #90c08d;
+    margin: 0px auto;
+    display: flex;
+    align-items: center;
+    border: 1px solid;
+}
+
+.down {
+    width: 760px;
+    height: 420px;
+    background-color: #90c08d;
+    margin: 0px auto;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    border: 1px solid;
+}
+
+[class^='dd'] {
+    width: 80px;
+    height: 80px;
+    background-color: #ccd2f7;
+    margin: 20px;
+    border: 1px solid;
+}
+
+.dd5 {
+    margin-left: 180px;
+}
+
+.left {
+    width: 200px;
+    height: 370px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.l1 {
+    width: 200px;
+    height: 300px;
+    background-color: #ccd2f7;
+    border: 1px solid;
+}
+
+[class^='ll'] {
+    width: 50px;
+    height: 50px;
+    background-color: #ccd2f7;
+    border: 1px solid;
+}
+
+.three {
+    width: 200px;
+    height: 50px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.right {
+    width: 480px;
+    height: 370px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+[class^='rr'] {
+    width: 480px;
+    height: 40px;
+    background-color: #ccd2f7;
+    border: 1px solid;
+}
+```
+
+## 携程手机端
+### 效果图
+![20241106112014](sjyniuybm.hn-bkt.clouddn.com/20241106112014.png)
+### 代码
+```css
+ * {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    background-color: #f4f4f4;
+}
+
+.all {
+    width: 390px;
+    height: 844px;
+    margin: 0px auto;
+    background-color: antiquewhite;
+}
+
+.search {
+    width: 390px;
+    height: 45px;
+    background-color: #f4f4f4;
+    position: relative;
+}
+
+.search input {
+    float: left;
+}
+
+.img1 {
+    width: 150px;
+    height: 36px;
+    position: absolute;
+    background-image: url(../../img/flex布局/5-2.png);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: -49px -275px;
+    overflow: hidden;
+    margin-left: 300px;
+    float: left;
+}
+
+.my span {
+    margin-top: 32px;
+    float: left;
+    margin-left: 162px;
+    color: #0e9fdc;
+    font-size: 14px;
+    font-weight: 600;
+}
+
+.img {
+    width: 390px;
+    height: 78px;
+    background: url(../../img/flex布局/5-12.jpg) no-repeat;
+    background-size: contain;
+    margin-bottom: 3px;
+}
+
+.nav {
+    /* width: 390px; */
+    height: 65px;
+    background-color: #fff;
+    border-radius: 7px;
+    list-style-type: none;
+    display: flex;
+    justify-content: space-around;
+}
+
+.nav div {
+    width: 77px;
+    height: 100px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-size: 12px;
+    font-weight: 500;
+    /* background-color: #fff; */
+}
+
+[class^=li] {
+    width: 35px;
+    height: 35px;
+    background-image: url(../../img/flex布局/5-3.png);
+    background-repeat: no-repeat;
+    background-size: cover;
+    margin-top: 7px;
+}
+
+.li2 {
+    background-position: 0 -35px;
+}
+
+.li3 {
+    background-position: 0 -69px;
+}
+
+.li4 {
+    background-position: 0 -105px;
+}
+
+.li5 {
+    background-position: 0 -139px;
+}
+
+.hotel {
+    height: 245px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.h1,
+.h2,
+.h3 {
+    height: 80px;
+    display: flex;
+    justify-content: space-between;
+}
+
+[class^='left'] {
+    height: 80px;
+    width: 129px;
+    text-align: center;
+    background-image: url(../../img/flex布局/5-4.png);
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: bottom center;
+    line-height: 50px;
+    color: #fff;
+}
+
+.left1 {
+    background-color: #fa6c54;
+}
+
+.left2 {
+    background-color: #4e9ced;
+}
+
+.left3 {
+    background-color: #48c794;
+}
+
+[class^='middle'],
+[class^='right'] {
+    height: 80px;
+    width: 129px;
+    /* background-color: #fb8351; */
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+[class^='middle'] div,
+[class^='right'] div {
+    height: 39px;
+    width: 128px;
+    background-color: #fa7453;
+    line-height: 39px;
+    text-align: center;
+    color: #fff;
+}
+
+.middle1 div,
+.right1 div {
+    background-color: #fa6c54;
+}
+
+.middle2 div,
+.right2 div {
+    background-color: #4e9ced;
+}
+
+.middle3 div,
+.right3 div {
+    background-color: #48c794;
+}
+
+.wifi {
+    height: 115px;
+    background-color: #fff;
+    border-radius: 7px;
+    margin-bottom: 3px;
+}
+
+.wifi ul {
+    list-style-type: none;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+}
+
+.wifi ul div {
+    width: 76px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-size: 14px;
+}
+
+.wUl .w1 {
+    width: 30px;
+    height: 30px;
+    background: url(../../img/flex布局/5-1.png) no-repeat;
+    background-size: cover;
+    margin-top: 5px;
+}
+
+.active {
+    height: 70px;
+    background-color: #fff;
+    margin-bottom: 3px;
+    position: relative;
+}
+
+.active .a1 {
+    width: 125px;
+    height: 30px;
+    background: url(../../img/flex布局/5-5.png) no-repeat;
+    background-size: cover;
+    background-position: 8px -30px;
+    position: absolute;
+    top: 20px;
+}
+
+.bottom1 {
+    width: 390px;
+    height: 135px;
+    display: flex;
+    justify-content: space-around;
+}
+
+.bottom1 .s1 {
+    width: 200px;
+    height: 135px;
+    background: url(../../img/flex布局/5-6.jpg) no-repeat;
+    background-size: contain;
+}
+
+.bottom1 .s2 {
+    width: 200px;
+    height: 135px;
+    background: url(../../img/flex布局/5-7.jpg) no-repeat;
+    background-size: contain;
+}
+
+.bottom2 {
+    width: 390px;
+    height: 85px;
+    display: flex;
+    justify-content: space-around;
+}
+
+.bottom2 .s3 {
+    width: 200px;
+    height: 85px;
+    background: url(../../img/flex布局/5-8.jpg) no-repeat;
+    background-size: contain;
+}
+
+.bottom2 .s4 {
+    width: 200px;
+    height: 85px;
+    background: url(../../img/flex布局/5-9.jpg) no-repeat;
+    background-size: contain;
+}
+
+.bottom3 {
+    width: 390px;
+    height: 85px;
+    display: flex;
+    justify-content: space-around;
+}
+
+.bottom3 .s5 {
+    width: 200px;
+    height: 85px;
+    background: url(../../img/flex布局/5-10.jpg) no-repeat;
+    background-size: contain;
+}
+
+.bottom3 .s6 {
+    width: 200px;
+    height: 85px;
+    background: url(../../img/flex布局/5-11.jpg) no-repeat;
+    background-size: contain;
+}
+```