diff --git "a/\344\275\225\345\230\211\346\200\241/\346\226\260\345\273\272 \346\226\207\346\234\254\346\226\207\346\241\243.txt" "b/\344\275\225\345\230\211\346\200\241/1.txt" similarity index 100% rename from "\344\275\225\345\230\211\346\200\241/\346\226\260\345\273\272 \346\226\207\346\234\254\346\226\207\346\241\243.txt" rename to "\344\275\225\345\230\211\346\200\241/1.txt" diff --git "a/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/1.txt" "b/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/1.html" similarity index 100% rename from "\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/1.txt" rename to "\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/1.html" diff --git "a/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/2.txt" "b/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/2.html" similarity index 100% rename from "\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/2.txt" rename to "\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/2.html" diff --git "a/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/3.txt" "b/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/3.html" similarity index 100% rename from "\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/3.txt" rename to "\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/3.html" diff --git "a/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/4.txt" "b/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/4.html" similarity index 100% rename from "\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/4.txt" rename to "\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/4.html" diff --git "a/\344\275\225\345\230\211\346\200\241/20241024-\351\252\260\345\255\220\344\275\234\344\270\232/\346\226\260\345\273\272 DOC \346\226\207\346\241\243.txt" "b/\344\275\225\345\230\211\346\200\241/20241024-\351\252\260\345\255\220\344\275\234\344\270\232/\346\226\260\345\273\272 DOC \346\226\207\346\241\243.txt" new file mode 100644 index 0000000000000000000000000000000000000000..7d1b800c852e6a5eec921056dd28b793623a8d0e --- /dev/null +++ "b/\344\275\225\345\230\211\346\200\241/20241024-\351\252\260\345\255\220\344\275\234\344\270\232/\346\226\260\345\273\272 DOC \346\226\207\346\241\243.txt" @@ -0,0 +1,228 @@ + + + + + + + Document + + + + + +
+

+
+ +
+

+

+
+ +
+

+

+

+
+ +
+
+

+

+
+
+

+

+
+
+ +
+
+

+

+
+
+

+
+
+

+

+
+
+ +
+
+

+

+
+
+

+

+
+
+

+

+
+
+ +
+
+

+

+

+
+
+

+
+
+

+

+

+
+
+ +
+
+

+

+

+
+
+

+

+
+
+

+

+

+
+
+ +
+
+

+

+

+
+
+

+

+

+
+
+

+

+

+
+
+ + + \ No newline at end of file diff --git "a/\344\275\225\345\230\211\346\200\241/20241028-flex\345\270\203\345\261\200.md" "b/\344\275\225\345\230\211\346\200\241/20241028-flex\345\270\203\345\261\200.md" new file mode 100644 index 0000000000000000000000000000000000000000..3ad6c1b9dc7191d3e33e65edfb44ad756c1305f1 --- /dev/null +++ "b/\344\275\225\345\230\211\346\200\241/20241028-flex\345\270\203\345\261\200.md" @@ -0,0 +1,54 @@ + ### 概念:弹性盒子、子元素 + +在讲 flex 的知识点之前,我们事先约定两个概念: + +- **弹性盒子**:指的是使用 `display:flex` 或 `display:inline-flex` 声明的**父容器**。 + +- **子元素/弹性元素**:指的是父容器里面的子元素们(父容器被声明为 flex 盒子的情况下)。 + +### 概念:主轴和侧轴 + +弹性盒子里面的子元素们,默认是从左至右排列的,这个方向,代表的就是主轴的方向。 + +- 主轴:flex容器的主轴,默认是水平方向,从左向右。 + +- 侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向,从上往下。 + +### flex-direction 属性 + +主轴和侧轴并不是固定不变的,可以通过 `flex-direction` 更换方向 +`flex-direction`:用于设置盒子中**子元素**的排列方向。属性值可以是: + +| 属性值 | 描述 | +|:-------------|:-------------| +| row | 从左到右水平排列子元素(默认值) | +|column|从上到下垂直排列子元素| +| row-reverse |从右向左排列子元素 | +|column-reverse|从下到上垂直排列子元素| + +备注:如果我们不给父容器写`flex-direction`这个属性,那么,子元素默认就是从左到右排列的。 + +### flex-wrap 属性 + +`flex-wrap:wrap`换行 +`flex-wrap:no-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` 拉伸 \ No newline at end of file diff --git "a/\344\275\225\345\230\211\346\200\241/20241028-flex\345\270\203\345\261\200\344\275\234\344\270\232/20241028.html" "b/\344\275\225\345\230\211\346\200\241/20241028-flex\345\270\203\345\261\200\344\275\234\344\270\232/20241028.html" new file mode 100644 index 0000000000000000000000000000000000000000..b3494afc83fe1f345ddce0dd76a3f263fbbb4c71 --- /dev/null +++ "b/\344\275\225\345\230\211\346\200\241/20241028-flex\345\270\203\345\261\200\344\275\234\344\270\232/20241028.html" @@ -0,0 +1,195 @@ + + + + + + Document + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + \ No newline at end of file