diff --git "a/\351\273\216\346\254\243\346\254\243/20241104--flex\345\270\203\345\261\200.md" "b/\351\273\216\346\254\243\346\254\243/20241104--flex\345\270\203\345\261\200.md" new file mode 100644 index 0000000000000000000000000000000000000000..34391621d586fed91293bb38e3d27257106a189b --- /dev/null +++ "b/\351\273\216\346\254\243\346\254\243/20241104--flex\345\270\203\345\261\200.md" @@ -0,0 +1,561 @@ +# 作业 +## 效果图 +![第一题](./Imag/屏幕截图%202024-11-07%20151415.png) +```css + +``` +```html + +
+
1
+
2
+
3
+
+ +``` +![第二题](./Imag/屏幕截图%202024-11-07%20151431.png) +```css + +``` +```html + +
+
1
+
2
+
3
+
+ +``` +![第三题](./Imag/屏幕截图%202024-11-07%20151450.png) +```css + +``` +```html + +
+
1
+
2
+
3
+
+ +``` +![第四题](./Imag/屏幕截图%202024-11-07%20151505.png) +```css + +``` +```html + +
+
1
+
2
+
3
+
+ +``` +![第五题](./Imag/屏幕截图%202024-11-07%20151519.png) +```css + +``` +```html + +
+
1
+
2
+
3
+
+ +``` +![第六题](./Imag/屏幕截图%202024-11-07%20151531.png) +```css + +``` +```html + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ +``` +![第七题](./Imag/屏幕截图%202024-11-07%20151543.png) +```css + +``` +```html + +
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
+ +``` +# 笔记 +## 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`。 + +### flex属性 +- 设置子盒子的权重和伸缩性。 + +## 相关链接 +- [CSS Flexbox 可视化手册](http://img.smyhvae.com/20190821_2101.png) + - [英文原版](https://medium.com/swlh/css-flexbox-fundamentals-visual-guide-1c467f480dac) + - [中文翻译](https://zhuanlan.zhihu.com/p/56046851) +- [flex效果在线演示](https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/) +- [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) + - [中文翻译](https://www.html.cn/archives/8629) +- [后盾人flex教程](http://houdunren.gitee.io/note/css/10%20%E5%BC%B9%E6%80%A7%E5%B8%83%E5%B1%80.html) + +## 技巧：使用margin自动撑满剩余空间 \ No newline at end of file diff --git "a/\351\273\216\346\254\243\346\254\243/Imag/\345\261\217\345\271\225\346\210\252\345\233\276 2024-11-07 151415.png" "b/\351\273\216\346\254\243\346\254\243/Imag/\345\261\217\345\271\225\346\210\252\345\233\276 2024-11-07 151415.png" new file mode 100644 index 0000000000000000000000000000000000000000..3528636023127b2fc8d6949f7285de9120c35d34 Binary files /dev/null and "b/\351\273\216\346\254\243\346\254\243/Imag/\345\261\217\345\271\225\346\210\252\345\233\276 2024-11-07 151415.png" differ diff --git "a/\351\273\216\346\254\243\346\254\243/Imag/\345\261\217\345\271\225\346\210\252\345\233\276 2024-11-07 151431.png" "b/\351\273\216\346\254\243\346\254\243/Imag/\345\261\217\345\271\225\346\210\252\345\233\276 2024-11-07 151431.png" new file mode 100644 index 0000000000000000000000000000000000000000..0a6443cb667cffa3fc3d1c3c8424f4a62cb97b62 Binary files /dev/null and "b/\351\273\216\346\254\243\346\254\243/Imag/\345\261\217\345\271\225\346\210\252\345\233\276 2024-11-07 151431.png" differ diff --git "a/\351\273\216\346\254\243\346\254\243/Imag/\345\261\217\345\271\225\346\210\252\345\233\276 2024-11-07 151450.png" "b/\351\273\216\346\254\243\346\254\243/Imag/\345\261\217\345\271\225\346\210\252\345\233\276 2024-11-07 151450.png" new file mode 100644 index 0000000000000000000000000000000000000000..40db424b000ed7c599d40ea67ac0d2edf1b21740 Binary files /dev/null and "b/\351\273\216\346\254\243\346\254\243/Imag/\345\261\217\345\271\225\346\210\252\345\233\276 2024-11-07 151450.png" differ diff --git "a/\351\273\216\346\254\243\346\254\243/Imag/\345\261\217\345\271\225\346\210\252\345\233\276 2024-11-07 151505.png" "b/\351\273\216\346\254\243\346\254\243/Imag/\345\261\217\345\271\225\346\210\252\345\233\276 2024-11-07 151505.png" new file mode 100644 index 0000000000000000000000000000000000000000..c85c1f82730080ebf9bca96516ccdee77976fa98 Binary files /dev/null and "b/\351\273\216\346\254\243\346\254\243/Imag/\345\261\217\345\271\225\346\210\252\345\233\276 2024-11-07 151505.png" differ diff --git "a/\351\273\216\346\254\243\346\254\243/Imag/\345\261\217\345\271\225\346\210\252\345\233\276 2024-11-07 151519.png" "b/\351\273\216\346\254\243\346\254\243/Imag/\345\261\217\345\271\225\346\210\252\345\233\276 2024-11-07 151519.png" new file mode 100644 index 0000000000000000000000000000000000000000..99a941fdb71c621ba4a01c5feeed0dce33cf427f Binary files /dev/null and "b/\351\273\216\346\254\243\346\254\243/Imag/\345\261\217\345\271\225\346\210\252\345\233\276 2024-11-07 151519.png" differ diff --git "a/\351\273\216\346\254\243\346\254\243/Imag/\345\261\217\345\271\225\346\210\252\345\233\276 2024-11-07 151531.png" "b/\351\273\216\346\254\243\346\254\243/Imag/\345\261\217\345\271\225\346\210\252\345\233\276 2024-11-07 151531.png" new file mode 100644 index 0000000000000000000000000000000000000000..7a68b8528fd5de6ff1116c42a8be89092bac54c2 Binary files /dev/null and "b/\351\273\216\346\254\243\346\254\243/Imag/\345\261\217\345\271\225\346\210\252\345\233\276 2024-11-07 151531.png" differ diff --git "a/\351\273\216\346\254\243\346\254\243/Imag/\345\261\217\345\271\225\346\210\252\345\233\276 2024-11-07 151543.png" "b/\351\273\216\346\254\243\346\254\243/Imag/\345\261\217\345\271\225\346\210\252\345\233\276 2024-11-07 151543.png" new file mode 100644 index 0000000000000000000000000000000000000000..d0c810d55b31bc66e10186845a63dcfc4227eace Binary files /dev/null and "b/\351\273\216\346\254\243\346\254\243/Imag/\345\261\217\345\271\225\346\210\252\345\233\276 2024-11-07 151543.png" differ