diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241024/14.png" "b/\346\235\250\346\210\220\350\261\252/img/20241024/14.png" new file mode 100644 index 0000000000000000000000000000000000000000..9b15a61d554edbaf18e570c75ec6b54c87a28cc9 Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241024/14.png" differ diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241024-\345\212\250\347\224\27306.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241024-\345\212\250\347\224\27306.html" index c30b0e4289e74c5c05333f5576c7b18d9604080a..21da3472ca1b4e5951b8a6efb73d3717ad7c00e9 100644 --- "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241024-\345\212\250\347\224\27306.html" +++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241024-\345\212\250\347\224\27306.html" @@ -13,7 +13,7 @@ background-color: whitesmoke; } - .BOX { + .all { position: relative; width: 1220px; height: 410px; @@ -21,7 +21,7 @@ border-radius: 10px; } - .BOX img { + .all img { margin: 20px 0px 20px 20px; } @@ -82,7 +82,7 @@ -
+
《大鱼》 diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241024-\346\255\214\346\233\262.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241024-\346\255\214\346\233\262.html" new file mode 100644 index 0000000000000000000000000000000000000000..aa2259dfe486f4b9cc983f0d17e32c9207612dcb --- /dev/null +++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241024-\346\255\214\346\233\262.html" @@ -0,0 +1,39 @@ + + + + + Document + + + +
+
+
+
+
+
+ + \ No newline at end of file diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241028-flex\344\270\273\350\275\264\345\257\271\351\275\220.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241028-flex\344\270\273\350\275\264\345\257\271\351\275\220.html" new file mode 100644 index 0000000000000000000000000000000000000000..53029101fa8f28d70f26c249568f73a56cf0c74d --- /dev/null +++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241028-flex\344\270\273\350\275\264\345\257\271\351\275\220.html" @@ -0,0 +1,38 @@ + + + + + Document + + + +
+
+
+
+
+ + \ No newline at end of file diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241028-flex\344\270\273\350\275\264\346\226\271\345\220\221.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241028-flex\344\270\273\350\275\264\346\226\271\345\220\221.html" new file mode 100644 index 0000000000000000000000000000000000000000..11a54f1bb24904ac95161328e59bcbc8088f94d6 --- /dev/null +++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241028-flex\344\270\273\350\275\264\346\226\271\345\220\221.html" @@ -0,0 +1,42 @@ + + + + + + Document + + + + +
+
+
+
+
+ + + \ No newline at end of file diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241028-flex\344\272\244\345\217\211\350\275\264\345\257\271\351\275\220.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241028-flex\344\272\244\345\217\211\350\275\264\345\257\271\351\275\220.html" new file mode 100644 index 0000000000000000000000000000000000000000..01c30925412c84433db7ce42e01ddab916b1c193 --- /dev/null +++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241028-flex\344\272\244\345\217\211\350\275\264\345\257\271\351\275\220.html" @@ -0,0 +1,37 @@ + + + + + Document + + + +
+
+
+
+
+ + \ No newline at end of file diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241028-flex\345\237\272\347\241\200\345\270\203\345\261\200.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241028-flex\345\237\272\347\241\200\345\270\203\345\261\200.html" new file mode 100644 index 0000000000000000000000000000000000000000..b16f61e793d25a7ea5edbfad210656afd963fb7d --- /dev/null +++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241028-flex\345\237\272\347\241\200\345\270\203\345\261\200.html" @@ -0,0 +1,35 @@ + + + + + Document + + + +
+
+
+
+
+ + \ No newline at end of file diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241028-flex\347\255\233\345\255\220\345\270\203\345\261\200.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241028-flex\347\255\233\345\255\220\345\270\203\345\261\200.html" new file mode 100644 index 0000000000000000000000000000000000000000..6f01dee49fb73c64fa9a8abe46ec3cf5bb61cfed --- /dev/null +++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241028-flex\347\255\233\345\255\220\345\270\203\345\261\200.html" @@ -0,0 +1,65 @@ + + + + + Document + + + + + + + + + + + + \ No newline at end of file diff --git "a/\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20241028-flex.md" "b/\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20241028-flex.md" new file mode 100644 index 0000000000000000000000000000000000000000..ea1c9a758912d10ecd01456ba970985c7e1c5b96 --- /dev/null +++ "b/\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20241028-flex.md" @@ -0,0 +1,52 @@ +## flex：弹性盒 + +1. `flex-direction` + 1. 主轴:` flex-direction `定义，可以取 4 个值： + + + `row` （从左往右） + + `row-reverse` （从右往左） + + `column` （从上到下） + + `column-reverse` （从下到上） + + 2. 交叉轴:交叉轴垂直于主轴 + + + 如果你的flex-direction（主轴）设成了 row 或者 row-reverse 的话，交叉轴的方向就是沿着上下方向延伸的。 + + 如果主轴方向设成了 column 或者 column-reverse，交叉轴就是水平方向。 + +2. `flow-wrap`: 定义项目是否换行以及如何换行。它的值可以是`nowrap`（默认不换行）、`wrap`或`wrap-reverse`。 + +3. `flex-flow`: flex-direction和flex-wrap的简写，默认值为`row nowrap`,第一个指定的值为 flex-direction，第二个指定的值为 flex-wrap. + +4. 控制对齐的属性 + + justify-content - 控制主轴（横轴）上所有 flex 项目的对齐。 + ```css + justify-content: center; /* 居中排列 */ + justify-content: flex-start; /* 从行首起始位置开始排列 */ + justify-content: flex-end; /* 从行尾位置开始排列 */ + justify-content: space-between; /* 均匀排列每个元素首个元素放置于起点，末尾元素放置于终点 */ + justify-content: space-around; /* 均匀排列每个元素每个元素周围分配相同的空间 */ + justify-content: space-evenly; /* 均匀排列每个元素每个元素之间的间隔相等 */ + justify-content: stretch; /* 均匀排列每个元素'auto'-sized 的元素会被拉伸以适应容器的大小 */ + ``` + + align-items - 控制交叉轴（纵轴）上所有 flex 项目的对齐。 + ```css + align-items: stretch; + align-items: center; + align-items: start; + align-items: end; + ``` + + align-self - 控制交叉轴（纵轴）上的单个 flex 项目的对齐。 + ```css + align-self: stretch; + align-self: center; + align-self: start; + align-self: end; + ``` + + align-content - 控制“多条主轴”的 flex 项目在交叉轴的对齐 + ```css + align-content: center; /* 将项目放置在中点 */ + align-content: start; /* 最先放置项目 */ + align-content: end; /* 最后放置项目 */ + align-content: flex-start; /* 从起始点开始放置 flex 元素 */ + align-content: flex-end; /* 从终止点开始放置 flex 元素 */ + ```