diff --git "a/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241028\347\273\203\344\271\240/20231017210305.png" "b/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241028\347\273\203\344\271\240/20231017210305.png" new file mode 100644 index 0000000000000000000000000000000000000000..aa91346b17db7b1c0a0da3be60a79c1537250e8e Binary files /dev/null and "b/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241028\347\273\203\344\271\240/20231017210305.png" differ diff --git "a/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241028\347\273\203\344\271\240/20231017210408.png" "b/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241028\347\273\203\344\271\240/20231017210408.png" new file mode 100644 index 0000000000000000000000000000000000000000..b2364f5aa00b1865127c7d57d569496999752a23 Binary files /dev/null and "b/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241028\347\273\203\344\271\240/20231017210408.png" differ diff --git "a/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241028\347\273\203\344\271\240/20231017211318.png" "b/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241028\347\273\203\344\271\240/20231017211318.png" new file mode 100644 index 0000000000000000000000000000000000000000..9dbf1b1ad56501a0fd12ea48bc7192c1a0480fc8 Binary files /dev/null and "b/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241028\347\273\203\344\271\240/20231017211318.png" differ diff --git "a/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241028\347\273\203\344\271\240/20241028\347\273\203\344\271\240\345\223\201\347\211\214.html" "b/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241028\347\273\203\344\271\240/20241028\347\273\203\344\271\240\345\223\201\347\211\214.html" new file mode 100644 index 0000000000000000000000000000000000000000..4be897690a3ecdfcff071d03bc948444ca385331 --- /dev/null +++ "b/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241028\347\273\203\344\271\240/20241028\347\273\203\344\271\240\345\223\201\347\211\214.html" @@ -0,0 +1,116 @@ + + + + + +CSS3 Flip Animation + + + + +
+
+
+
1分钱专享
+
“百度钱包”
+
+
+
款福利商品
+
会员低价尊享
+
今日在线
+
+
+
+ + + \ No newline at end of file diff --git "a/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241028\347\273\203\344\271\240/20241028\347\273\203\344\271\240\346\211\221\345\205\213.html" "b/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241028\347\273\203\344\271\240/20241028\347\273\203\344\271\240\346\211\221\345\205\213.html" new file mode 100644 index 0000000000000000000000000000000000000000..633d2d2dfe0f0c8d0dfb7026bf6629ac3c09489b --- /dev/null +++ "b/\345\215\242\350\257\227\350\257\255/\344\275\234\344\270\232/20241028\347\273\203\344\271\240/20241028\347\273\203\344\271\240\346\211\221\345\205\213.html" @@ -0,0 +1,10 @@ + + + + + Document + + + + + \ No newline at end of file diff --git "a/\345\215\242\350\257\227\350\257\255/\347\254\224\350\256\260/20241028-Flex\345\270\203\345\261\200.md" "b/\345\215\242\350\257\227\350\257\255/\347\254\224\350\256\260/20241028-Flex\345\270\203\345\261\200.md" new file mode 100644 index 0000000000000000000000000000000000000000..b964e2128d5bacbedb3a40f4aed83c00e1b976a0 --- /dev/null +++ "b/\345\215\242\350\257\227\350\257\255/\347\254\224\350\256\260/20241028-Flex\345\270\203\345\261\200.md" @@ -0,0 +1,55 @@ +## Flex布局 + +1. 容器和项目： +容器：使用display: flex;或display: inline-flex;声明的元素。 +项目：容器内的直接子元素。 + + + +2. 主轴和交叉轴： +主轴（main axis）：项目沿着容器的这个轴排列，可以是水平或垂直。 +交叉轴（cross axis）：垂直于主轴的轴。 + + +3. 基本属性： +flex-direction：设置主轴的方向（row | row-reverse | column | column-reverse）。 +flex-wrap：设置项目是否换行（nowrap | wrap | wrap-reverse）。 +flex-flow：是flex-direction和flex-wrap的简写形式。 +justify-content：设置项目在主轴上的对齐方式（flex-start | flex-end | center | space-between | space-around | space-evenly）。 +align-items：设置项目在交叉轴上的对齐方式（flex-start | flex-end | center | baseline | stretch）。 +align-content：设置多行项目在交叉轴上的分布（flex-start | flex-end | center | space-between | space-around | stretch）。、 + +4. 项目属性： +order：设置项目的排序顺序（默认为0，数值越小越靠前）。 +flex-grow：设置项目放大比例（默认为0，即如果空间不足，不放大）。 +flex-shrink：设置项目缩小比例（默认为1，即如果空间不足，缩小）。 +flex-basis：设置项目在主轴上的初始大小（可以是长度值，如20%，或者auto）。 +flex：是flex-grow、flex-shrink和flex-basis的简写形式，如flex: 1 1 20%;。 + + +5. 自适应布局： +使用flex: 1;可以让所有项目等分剩余空间。 +使用flex: auto;可以让项目根据内容自动调整大小。 + + +6. 对齐和分布： +通过justify-content和align-items可以实现项目在容器内的多种对齐和分布方式。 +align-self属性可以覆盖align-items对单个项目的对齐方式。 + + +7. 多行Flex容器： +当flex-wrap设置为wrap或wrap-reverse时，容器可以有多行项目。 +align-content属性在多行情况下控制项目在交叉轴上的分布。 + + +8. 兼容性： +Flexbox在现代浏览器中得到了很好的支持，但在一些旧版浏览器中可能需要前缀或替代方案。 + + +9. 浏览器前缀： +在早期，为了使用Flexbox，可能需要添加浏览器前缀，如-webkit-、-moz-、-ms-等。 + +10. 实用技巧： + +使用flex: 1;可以快速创建等宽的列。 +使用margin: auto;可以居中单个项目或整个Flex容器。 \ No newline at end of file