diff --git "a/\345\217\266\345\255\220\350\241\241/20241028-Flex\345\270\203\345\261\200.md" "b/\345\217\266\345\255\220\350\241\241/20241028-Flex\345\270\203\345\261\200.md" new file mode 100644 index 0000000000000000000000000000000000000000..a98cd7baa177a4ce9c4bf07325dd1ffc830760c3 --- /dev/null +++ "b/\345\217\266\345\255\220\350\241\241/20241028-Flex\345\270\203\345\261\200.md" @@ -0,0 +1,88 @@ + +# CSS3属性：Flex布局 + +## 基本概念 + +### Flex容器 + +- **定义**：将元素设置为flex容器，可以通过设置其 `display` 属性为 `flex` 或 `inline-flex`。 +- **属性**： + - `flex-direction`：定义主轴的方向（行或列）。 + - `flex-wrap`：定义项目是否换行。 + - `flex-flow`：`flex-direction` 和 `flex-wrap` 的简写。 + - `justify-content`：定义主轴上的对齐方式。 + - `align-items`：定义交叉轴上的对齐方式。 + - `align-content`：定义多行的对齐方式。 + +### Flex项目 + +- **定义**：Flex容器中的子元素称为Flex项目。 +- **属性**： + - `flex-grow`：定义项目的放大比例。 + - `flex-shrink`：定义项目的缩小比例。 + - `flex-basis`：定义在分配多余空间之前，项目占据的主轴空间。 + - `flex`：`flex-grow`、`flex-shrink` 和 `flex-basis` 的简写。 + - `align-self`：允许单个项目有不同于其他项目的对齐方式。 + +## 常用属性及示例 + +### 1. `flex-direction` + +- **值**： + - `row`：默认值，项目从左到右排列。 + - `row-reverse`：项目从右到左排列。 + - `column`：项目从上到下排列。 + - `column-reverse`：项目从下到上排列。 + +```css +.container { + display: flex; + flex-direction: column; +} +``` + +### 2. `justify-content` + +- **值**： + - `flex-start`：项目从主轴起始位置对齐。 + - `flex-end`：项目从主轴结束位置对齐。 + - `center`：项目在主轴居中对齐。 + - `space-between`：项目之间留有间隔，第一个项目在起始位置，最后一个项目在结束位置。 + - `space-around`：项目之间留有相等的间隔，间隔在项目两侧。 + +```css +.container { + display: flex; + justify-content: space-between; +} +``` + +### 3. `align-items` + +- **值**： + - `flex-start`：项目在交叉轴的起始位置对齐。 + - `flex-end`：项目在交叉轴的结束位置对齐。 + - `center`：项目在交叉轴居中对齐。 + - `baseline`：项目在交叉轴的基线对齐。 + - `stretch`：项目拉伸以填满容器（默认值）。 + +```css +.container { + display: flex; + align-items: center; +} +``` + +### 4. `flex-wrap` + +- **值**： + - `nowrap`：默认值，所有项目在一行上。 + - `wrap`：项目换行。 + - `wrap-reverse`：项目换行，但顺序反向。 + +```css +.container { + display: flex; + flex-wrap: wrap; +} +``` diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241028-Flex\345\270\203\345\261\200/1.html" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241028-Flex\345\270\203\345\261\200/1.html" new file mode 100644 index 0000000000000000000000000000000000000000..65d349e39ba1f94250deb76288e6399753102250 --- /dev/null +++ "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241028-Flex\345\270\203\345\261\200/1.html" @@ -0,0 +1,44 @@ + + + + + + + Document + + + + + +
+
A
+
B
+
C
+
+ + + \ No newline at end of file diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241028-Flex\345\270\203\345\261\200/2.html" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241028-Flex\345\270\203\345\261\200/2.html" new file mode 100644 index 0000000000000000000000000000000000000000..8ab1369750a580ed024100488efadb8b9c00ba49 --- /dev/null +++ "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241028-Flex\345\270\203\345\261\200/2.html" @@ -0,0 +1,91 @@ + + + + + + + Document + + + + + + 将子元素在主轴上居中对齐 +
+
A
+
B
+
C
+
+ + 将子元素在主轴上分散对齐space-between +
+
A
+
B
+
C
+
+ + 将子元素在主轴上分散对齐space-around +
+
A
+
B
+
C
+
+ + + \ No newline at end of file diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241028-Flex\345\270\203\345\261\200/3.html" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241028-Flex\345\270\203\345\261\200/3.html" new file mode 100644 index 0000000000000000000000000000000000000000..2992fe021b885a3044d343d16bc11d1a66123685 --- /dev/null +++ "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241028-Flex\345\270\203\345\261\200/3.html" @@ -0,0 +1,91 @@ + + + + + + + Document + + + + + + 将子元素在交叉轴上居中对齐 +
+
A
+
B
+
C
+
+ + 将子元素在交叉轴上对齐到顶部 +
+
A
+
B
+
C
+
+ + 将子元素在交叉轴上对齐到底部 +
+
A
+
B
+
C
+
+ + + \ No newline at end of file diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241028-Flex\345\270\203\345\261\200/4.html" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241028-Flex\345\270\203\345\261\200/4.html" new file mode 100644 index 0000000000000000000000000000000000000000..8cdf7337ed4928c4946ed043d4bcdb2f1197e7f0 --- /dev/null +++ "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241028-Flex\345\270\203\345\261\200/4.html" @@ -0,0 +1,59 @@ + + + + + + + Document + + + + + + 将子元素的方向从水平改为垂直 +
+
A
+
B
+
C
+
+ + + \ No newline at end of file diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241028-Flex\345\270\203\345\261\200/5.html" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241028-Flex\345\270\203\345\261\200/5.html" new file mode 100644 index 0000000000000000000000000000000000000000..fd68080bddb44b66f59204530cea1c0cf7155bc0 --- /dev/null +++ "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241028-Flex\345\270\203\345\261\200/5.html" @@ -0,0 +1,59 @@ + + + + + + + Document + + + + + + 将子元素的方向从水平改为垂直 +
+
A
+
B
+
C
+
+ + + \ No newline at end of file diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241028-Flex\345\270\203\345\261\200/6.html" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241028-Flex\345\270\203\345\261\200/6.html" new file mode 100644 index 0000000000000000000000000000000000000000..4b1a2554bc337ad1cdbb64857a09682c90c14913 --- /dev/null +++ "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241028-Flex\345\270\203\345\261\200/6.html" @@ -0,0 +1,387 @@ + + + + + + + Document + + + + +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241028-Flex\345\270\203\345\261\200/Flex\345\270\203\345\261\200.md" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241028-Flex\345\270\203\345\261\200/Flex\345\270\203\345\261\200.md" new file mode 100644 index 0000000000000000000000000000000000000000..bc81650406092e073a68266d61bf2939e505fc29 --- /dev/null +++ "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241028-Flex\345\270\203\345\261\200/Flex\345\270\203\345\261\200.md" @@ -0,0 +1,817 @@ +### 二十九、flex布局 + +1. 基础布局练习： + +- 创建一个包含三个子元素的容器，并使用display: flex;将其设置为Flex容器。 +- 确保这三个子元素在容器中水平排列。 + +源代码 + +```html + + + + + + + Document + + + + + +
+
A
+
B
+
C
+
+ + + +``` + +效果图： + +![](https://img.haruka.net.cn/image/2024/11/03/w54hcc-0.png) + +2. 主轴对齐练习： + +- 使用justify-content属性，将上述练习中的子元素在主轴（默认为水平方向）上居中对齐。 +- 将子元素在主轴上分散对齐，使用space-between和space-around属性。 + +源代码 + +```html + + + + + + + Document + + + + + + 将子元素在主轴上居中对齐 +
+
A
+
B
+
C
+
+ + 将子元素在主轴上分散对齐space-between +
+
A
+
B
+
C
+
+ + 将子元素在主轴上分散对齐space-around +
+
A
+
B
+
C
+
+ + + +``` + +效果图： + +![](https://img.haruka.net.cn/image/2024/11/03/w64snj-0.png) + +3. 交叉轴对齐练习： + +- 使用align-items属性，将子元素在交叉轴（默认为垂直方向）上居中对齐。 +- 尝试使用flex-start和flex-end属性，使子元素在交叉轴上分别对齐到顶部和底部。 + +源代码 + +```html + + + + + + + Document + + + + + + 将子元素在交叉轴上居中对齐 +
+
A
+
B
+
C
+
+ + 将子元素在交叉轴上对齐到顶部 +
+
A
+
B
+
C
+
+ + 将子元素在交叉轴上对齐到底部 +
+
A
+
B
+
C
+
+ + + +``` + +效果图： + +![](https://img.haruka.net.cn/image/2024/11/03/w6ls1t-0.png) + +4. 主轴方向练习： + +- 使用flex-direction属性，将子元素的方向从水平改为垂直。 +- 观察容器和子元素的排列方式如何变化。 + +源代码 + +```html + + + + + + + Document + + + + + + 将子元素的方向从水平改为垂直 +
+
A
+
B
+
C
+
+ + + +``` + +效果图： + +![](https://img.haruka.net.cn/image/2024/11/03/w6t75f-0.png) + +5. 交叉轴方向练习： + +- 使用flex-wrap属性，允许子元素在需要时换行。 +- 使用align-content属性在多行情况下对齐子元素。 + +源代码 + +```html + + + + + + + Document + + + + + + 在需要时换行，在多行情况下对齐子元素。 +
+
A
+
B
+
C
+
+ + + +``` + +效果图： + +![](https://img.haruka.net.cn/image/2024/11/03/w99xth-0.png) + +6. 使用flex实现如下几种布局-骰子布局练习 + +![20231020093152](https://img.haruka.net.cn/image/2024/10/28/qsthd1.png) + +源代码 + +```html + + + + + + + Document + + + + +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + +``` + +效果图： + +![](https://img.haruka.net.cn/image/2024/11/03/wa6k3h-0.png)