diff --git "a/\345\274\240\345\251\211\345\251\267/\344\275\234\344\270\232/flex\345\270\203\345\261\200.html" "b/\345\274\240\345\251\211\345\251\267/\344\275\234\344\270\232/flex\345\270\203\345\261\200.html"
new file mode 100644
index 0000000000000000000000000000000000000000..18b3557b3a5d4448d7c20f492a85245ce925b594
--- /dev/null
+++ "b/\345\274\240\345\251\211\345\251\267/\344\275\234\344\270\232/flex\345\270\203\345\261\200.html"
@@ -0,0 +1,55 @@
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git "a/\345\274\240\345\251\211\345\251\267/\347\254\224\350\256\260/2024.10.28-flex\345\270\203\345\261\200.md" "b/\345\274\240\345\251\211\345\251\267/\347\254\224\350\256\260/2024.10.28-flex\345\270\203\345\261\200.md"
new file mode 100644
index 0000000000000000000000000000000000000000..c267b2971f283db12b61ef9eae1ef4c91c0af788
--- /dev/null
+++ "b/\345\274\240\345\251\211\345\251\267/\347\254\224\350\256\260/2024.10.28-flex\345\270\203\345\261\200.md"
@@ -0,0 +1,77 @@
+## 一、基本概念
+1. **弹性容器（flex container）**：采用Flex布局的外层容器。通过设置display: flex;，可以将一个元素设置为弹性容器。
+2. **弹性项（flex item）**：弹性容器中的子元素，这些子元素会自动成为弹性项。
+3. **主轴（main axis）**：弹性容器的主方向，默认为水平方向。弹性项默认是沿主轴方向排列的。
+4. **交叉轴（cross axis）**：与主轴垂直的方向。
+## 二、容器属性
+1. flex-direction:用于设置主轴的方向。
+```
+取值：
+row：默认值，主轴为水平方向，子元素水平排列。
+row-reverse：主轴为水平方向，但子元素从右向左排列。
+column：主轴为垂直方向，子元素垂直排列。
+column-reverse：主轴为垂直方向，但子元素从下往上排列。
+```
+2. flex-wrap:用于定义弹性容器里的弹性项是否应该换行。
+```
+取值：
+nowrap：默认值，弹性项不换行，尽可能在一行显示。
+wrap：弹性项自动换行，超出容器宽度会进行换行显示。
+wrap-reverse：弹性项反向换行。
+```
+3. justify-content:定义在主轴上弹性项的对齐方式。
+```
+取值：
+flex-start：默认值，弹性项在主轴上从左至右排列。
+flex-end：弹性项在主轴上从右至左排列。
+center：弹性项在主轴上居中排列。
+space-between：弹性项在主轴上平均分布排列，两端不留空白。
+space-around：弹性项在主轴上平均分布排列，各自之间有空隙。
+```
+4. align-items: 定义在交叉轴上弹性项的对齐方式。
+```
+取值：
+stretch：默认值，弹性项在交叉轴上被拉伸填满弹性容器。
+flex-start：弹性项在交叉轴上从上至下排列。
+flex-end：弹性项在交叉轴上从下至上排列。
+center：弹性项在交叉轴上居中排列。
+baseline：每个弹性项都根据其文本基线进行对齐。
+```
+5. align-content: 定义弹性容器内的多行弹性项在交叉轴上的对齐方式。
+```
+取值：
+stretch：默认值，容器内的行拉伸以填充容器高度。
+flex-start：所有行在容器的顶部对齐。
+flex-end：所有行在容器的底部对齐。
+center：所有行在容器中垂直居中对齐。
+space-between：所有行平均分布在容器内，两端不留空白。
+space-around：所有行平均分布在容器内，两端留有相等的空白。
+```
+6. flex-flow
+* 是flex-direction和flex-wrap的缩写属性，用于指定弹性容器的主轴方向和换行方式。
+* 默认值为“row nowrap”。
+7. gap
+* 用于设置弹性容器和弹性项之间的间隔。
+* 可以接收一个长度值或百分比。
+## 三、项目属性
+1.flex-grow
+* 定义弹性项的放大比例。
+* 默认值为0，即不进行放大。
+2. flex-shrink
+* 设置弹性项的缩小比例。
+* 默认值为1，即缩小比例和弹性容器内其他元素相同。
+3. flex-basis
+* 设置弹性项在弹性容器内的基准宽度。
+* 默认值为auto，即弹性项的宽度由其内容决定。
+4. flex
+* 是flex-grow、flex-shrink和flex-basis这三个属性的缩写。
+* 默认值为“0 1 auto”。
+5. align-self
+* 控制某一个盒子在交叉轴上面的对齐方式。
+* 可以覆盖align-items属性在单个弹性项上的设置。
+6. order
+* 定义项目的排列顺序。
+* 默认值为0，数值越小排列越靠前。
+## 四、注意事项
+1. 当父盒子设为flex布局时，子元素的float、clear、vertical-align属性失效。
+2. Flex布局会根据弹性容器内的属性和内容进行位置布局，因此不需要像传统布局那样使用浮动和定位。
\ No newline at end of file