diff --git "a/\346\235\216\345\205\264\351\234\262/20241104--flex\345\270\203\345\261\200.md" "b/\346\235\216\345\205\264\351\234\262/20241104--flex\345\270\203\345\261\200.md"
new file mode 100644
index 0000000000000000000000000000000000000000..0b95d9643b2173d41ac9369bcfe4cfc8a2e4c1bd
--- /dev/null
+++ "b/\346\235\216\345\205\264\351\234\262/20241104--flex\345\270\203\345\261\200.md"
@@ -0,0 +1,522 @@
+# 弹性盒子
+## 声明定义
+使用 `display:flex` 或 `display:inline-flex` 声明一个**父容器**为弹性盒子。此时，这个父容器里的子元素们，会遵循弹性布局。一般用`display：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` 拉伸
+```
+# 作业
+```html
+
+```
+
+## 圣杯
+```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;
+}
+```