diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20241104flex\347\254\224\350\256\260.md" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20241104flex\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..91738f3d263df0ebd00cb479225d9b0ed807e935 --- /dev/null +++ "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20241104flex\347\254\224\350\256\260.md" @@ -0,0 +1,210 @@ +``` column:柱 + flex-start：起始端对齐 + flex-end：末尾段对齐 .. + align-items属性（垂直方向） + 对齐（justify-content） +space-between：两端对齐 + space-around：每个子元素两侧的间隔相等。 + flex-wrap：定义一行排不下时如何换行。 + wrap-reverse反向换行 + column-reverse 纵向反向排列 + 外边距:margin + 内边距:padding + 圆角边框:border-radius +盒阴影:box-shadow + ``` +# 笔记 +## flex +CSS3中的Flex布局在网页设计中提供了极大的灵活性和自适应性，改善了多个元素之间的布局排列。 + +### Flex初体验 +- **默认文档流**：块级子元素垂直排列。 +- **`display: flex`**：使子元素水平排列，从左至右。 + +### Flex布局的优势 +1. **文档流**：Flex布局的子元素不脱离文档流。 +2. **现代布局方式**：W3C提供的CSS规范，提供丰富属性，布局实现多样化且易用。 + +### Flex的兼容性问题 +- 不支持IE9及以下版本，IE10及以上部分支持。 +- 大型网站如网易新闻、淘宝因需兼容低版本IE浏览器，暂时不使用Flex布局。 + +### 概念：弹性盒子、子元素 +- **弹性盒子**：使用`display:flex`或`display:inline-flex`声明的父容器。 +- **子元素/弹性元素**：父容器内的子元素。 + +### 概念：主轴和侧轴 +- **主轴**：子元素默认排列方向（水平从左至右）。 +- **侧轴**：与主轴垂直的轴（默认垂直从上至下）。 + +## 弹性盒子 + +### 声明定义 +- 使用`display:flex`或`display:inline-flex`声明父容器为弹性盒子。 + +### flex-direction属性 +- 控制子元素的排列方向，可能的值包括`row`、`column`、`row-reverse`、`column-reverse`。 + +### flex-wrap属性 +- 控制子元素溢出时的换行处理。 + +### justify-content属性 +- 控制子元素在主轴上的排列方式，可能的值包括`flex-start`、`flex-end`、`center`、`space-around`、`space-between`。 + +## 弹性元素 + +### align-items属性 +- 设置子元素在侧轴上的对齐方式，可能的值包括`flex-start`、`flex-end`、`baseline`、`center`、`stretch` + +# 作业题 +![1730969476789](image/20241104flex笔记/1730969476789.png) +``` + +``` +```html + +
+
1
+
2
+
3
+
+ +``` +# 2 +![1730969496732](image/20241104flex笔记/1730969496732.png) +``` +css + +``` +```html + +
+
1
+
2
+
3
+
+ +``` + +# 3 +![1730969507087](image/20241104flex笔记/1730969507087.png) + +``` +css + +``` +```html + +
+
1
+
2
+
3
+
+ +``` + +# 4 +![1730969567189](image/20241104flex笔记/1730969567189.png) +``` +css + +``` +```html + +
+
1
+
2
+
3
+
+ +``` diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/20241104flex\347\254\224\350\256\260/1730969476789.png" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/20241104flex\347\254\224\350\256\260/1730969476789.png" new file mode 100644 index 0000000000000000000000000000000000000000..27fea72903983c873d592fd79824abbcc7808d12 Binary files /dev/null and "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/20241104flex\347\254\224\350\256\260/1730969476789.png" differ diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/20241104flex\347\254\224\350\256\260/1730969496732.png" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/20241104flex\347\254\224\350\256\260/1730969496732.png" new file mode 100644 index 0000000000000000000000000000000000000000..9e412c80172afe51724a3db9147c4f8d768e672e Binary files /dev/null and "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/20241104flex\347\254\224\350\256\260/1730969496732.png" differ diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/20241104flex\347\254\224\350\256\260/1730969507087.png" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/20241104flex\347\254\224\350\256\260/1730969507087.png" new file mode 100644 index 0000000000000000000000000000000000000000..d58005d2d2188327227ce59541dc87371802608c Binary files /dev/null and "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/20241104flex\347\254\224\350\256\260/1730969507087.png" differ diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/20241104flex\347\254\224\350\256\260/1730969567189.png" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/20241104flex\347\254\224\350\256\260/1730969567189.png" new file mode 100644 index 0000000000000000000000000000000000000000..f94cfd49caeea66e91f2c0f7d61676cc16a623ac Binary files /dev/null and "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/20241104flex\347\254\224\350\256\260/1730969567189.png" differ diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/\344\275\234\344\270\2321.png" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/\344\275\234\344\270\2321.png" new file mode 100644 index 0000000000000000000000000000000000000000..27fea72903983c873d592fd79824abbcc7808d12 Binary files /dev/null and "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/\344\275\234\344\270\2321.png" differ diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/\344\275\234\344\270\2322.png" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/\344\275\234\344\270\2322.png" new file mode 100644 index 0000000000000000000000000000000000000000..9e412c80172afe51724a3db9147c4f8d768e672e Binary files /dev/null and "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/\344\275\234\344\270\2322.png" differ diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/\344\275\234\344\270\2323.png" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/\344\275\234\344\270\2323.png" new file mode 100644 index 0000000000000000000000000000000000000000..d58005d2d2188327227ce59541dc87371802608c Binary files /dev/null and "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/\344\275\234\344\270\2323.png" differ diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/\344\275\234\344\270\2324.png" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/\344\275\234\344\270\2324.png" new file mode 100644 index 0000000000000000000000000000000000000000..f94cfd49caeea66e91f2c0f7d61676cc16a623ac Binary files /dev/null and "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/\344\275\234\344\270\2324.png" differ