diff --git "a/\351\273\204\351\233\252\350\212\254/20241104-flex\345\270\203\345\261\200.md" "b/\351\273\204\351\233\252\350\212\254/20241104-flex\345\270\203\345\261\200.md"
new file mode 100644
index 0000000000000000000000000000000000000000..0dc474af214f392da17cf1271dc7b16deba72a1c
--- /dev/null
+++ "b/\351\273\204\351\233\252\350\212\254/20241104-flex\345\270\203\345\261\200.md"
@@ -0,0 +1,596 @@
+## 弹性盒子
+### flex-wrap 属性
+控制子元素溢出时的换行处理
+
+### 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` 拉伸
+
+### `flex`属性：设置子盒子的权重
+代码演示：
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+# 作业
+## 携程
+### 代码
+```css
+
+```
+
+## 圣杯布局
+### 代码
+```css
+*{
+ margin: 0;
+ padding: 0;
+}
+.box{
+ width: 100%;
+ height: 100%;
+ color: white;
+ text-align: center;
+}
+.tt{
+ width: 100%;
+ height: 50px;
+ background-color: rgb(223, 223, 187);
+ align-content: center;
+}
+.mm{
+ width: 100%;
+ height: 600px;
+ display: flex;
+}
+.left{
+ width: 100px;
+ height: 600px;
+ background-color: forestgreen;
+}
+.center{
+ width: calc(100% - 80px);
+ height: 600px;
+ background-color: rgb(221, 232, 237);
+}
+.right{
+ width: 100px;
+ height: 600px;
+ background-color: rgb(147, 67, 223);
+}
+.dd{
+ width: 100%;
+ height: 50px;
+ background-color: rgb(24, 20, 20);
+ align-content: center;
+}
+@media screen and (max-width:500px){
+ .mm{
+ flex-direction: column;
+ align-items: baseline;
+ }
+ .center{
+ width: 100%;
+ order: 1;
+ }
+ .left{
+ width: 100%;
+ order: 2;
+ }
+ .right{
+ width: 100%;
+ order: 3;
+ }
+}
+```
+
+## 十个盒子
+### 代码
+```css
+.box {
+ width: 1000px;
+ display: flex;
+ flex-wrap: nowrap;
+}
+
+[class^='d'] {
+ width: 100px;
+ height: 100px;
+}
+
+.d1 {
+ background-color: #ee1010;
+}
+
+.d2 {
+ background-color: #eeea10;
+}
+
+.d3 {
+ background-color: #86ee10;
+}
+
+.d4 {
+ background-color: #10ee91;
+}
+
+.d5 {
+ background-color: #10eed0;
+}
+
+.d6 {
+ background-color: #1056ee;
+}
+
+.d7 {
+ background-color: #7810ee;
+}
+
+.d8 {
+ background-color: #e710ee;
+}
+
+.d9 {
+ background-color: #940855;
+}
+
+.d10 {
+ background-color: #4b9c09;
+}
+
+@media (max-width:500px) {
+ .box {
+ flex-direction: column;
+ }
+
+ .box div:nth-child(n+6) {
+ display: none;
+ }
+}
+```
+
+## 骰子
+### 代码
+```css
+*{
+ margin: 0;
+ padding: 0;
+}
+.box{
+ width: 1000px;
+ height: 100px;
+ display: flex;
+}
+[class^='d']{
+ width: 100px;
+ height: 100px;
+ border: 1px solid #eb3223;
+ margin-left: 10px;
+ display: flex;
+}
+[class^='t']{
+ width: 15px;
+ height: 15px;
+ background-color: black;
+ 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;
+ align-items: center;
+ justify-content: space-around;
+}
+.t31{
+ margin-right: 65px;
+}
+.t33{
+ margin-left: 65px;
+}
+.d4{
+ justify-content: space-around;
+}
+.h40{
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+}
+.d5{
+ justify-content: space-around;
+ align-items: center;
+}
+.t53{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.h50{
+ height: 105px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+}
+.d6{
+ justify-content: space-around;
+}
+.h60{
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+}
+.d7{
+ justify-content: space-around;
+ flex-direction: column;
+}
+.h70{
+ display: flex;
+ justify-content: space-around;
+}
+.d8{
+ justify-content: space-around;
+ flex-direction: column;
+}
+.h80{
+ display: flex;
+ justify-content: space-between;
+ margin: 10px;
+}
+.h90{
+ display: flex;
+ justify-content: space-around;
+}
+.d9{
+ justify-content: space-around;
+ flex-direction: column;
+}
+```
\ No newline at end of file