From df6c8ce958c567851791335c31646c8ba3319be6 Mon Sep 17 00:00:00 2001 From: Your Name Date: Wed, 6 Nov 2024 11:26:43 +0800 Subject: [PATCH] tj --- .../20241104flex\345\270\203\345\261\200.md" | 147 ++++++++++++++++++ 1 file changed, 147 insertions(+) create mode 100644 "\351\231\210\345\245\225\344\275\263/20241104flex\345\270\203\345\261\200.md" diff --git "a/\351\231\210\345\245\225\344\275\263/20241104flex\345\270\203\345\261\200.md" "b/\351\231\210\345\245\225\344\275\263/20241104flex\345\270\203\345\261\200.md" new file mode 100644 index 0000000..0db48b5 --- /dev/null +++ "b/\351\231\210\345\245\225\344\275\263/20241104flex\345\270\203\345\261\200.md" @@ -0,0 +1,147 @@ +# flex布局 +**flex布局的优势** +* flex布局的子元素不会脱离文档流 +* flex是一种现代的布局方式，是W3C第一次提供真正用于布局的CSS规范 +## 概念：弹性盒子、子元素 +- **弹性盒子**：指的是使用 `display:flex` 或 `display:inline-flex` 声明的**父容器**。 + +- **子元素/弹性元素**：指的是父容器里面的子元素们（父容器被声明为 flex 盒子的情况下）。 + +## 概念：主轴和侧轴 +- 主轴：flex容器的主轴，默认是水平方向，从左向右。 + +- 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向，从上往下。 + +PS：主轴和侧轴并不是固定不变的，可以通过 `flex-direction` 更换方向 + +## 弹性盒子 +### 声明定义： +使用 `display:flex` 或 `display:inline-flex` 声明一个**父容器**为弹性盒子。此时，这个父容器里的子元素们，会遵循弹性布局。 + +备注：一般是用 `display:flex`这个属性。`display:inline-flex`用得较少。 +### flex-direction 属性 +`flex-direction`：用于设置盒子中**子元素**的排列方向。 + +|属性值|描述| +|:-|-:| +|row|从左到右水平排列子元素（默认值）| +|column|从上到下垂直排列子元素| +|row-reverse|从右到左排列子元素| +|column-reverse|从下到上垂直排列子元素| + +备注：如果我们不给父容器写`flex-direction`这个属性，那么，子元素默认就是从左到右排列的。 + +## flex-wrap属性 +`flex-wrap`：控制子元素溢出时的换行处理。 + +## justify-content属性 +`justify-content`：控制子元素在主轴上的排列方式。 + +## 弹性元素 +### justify-content属性 +`justify-content: flex-start;` 设置子元素在**主轴上的对齐方式**。属性值可以是： + +- `flex-start` 从主轴的起点对齐（默认值） +- `flex-end` 从主轴的终点对齐 +- `center` 居中对齐 +- `space-around` 在父盒子里平分 +- `space-between` 两端对齐 平分 + +### align-items属性 +`align-items`：设置子元素在**侧轴上的对齐方式**。属性值可以是： + - `flex-start` 从侧轴开始的方向对齐 + - `flex-end` 从侧轴结束的方向对齐 + - `baseline` 基线 默认同flex-start + - `center` 中间对齐 + - `stretch` 拉伸 + +# 作业代码 +``` + + + + + + Document + + + +
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+ + +``` \ No newline at end of file -- Gitee