From 5f76494af66170a283da593e7f2835087f2120a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E4=BC=9F=E9=91=AB?= <14089910+cwx050211@user.noreply.gitee.com> Date: Mon, 4 Nov 2024 11:37:42 +0800 Subject: [PATCH 1/2] 1104 --- .../\344\275\234\344\270\232/1028/10281.html" | 18 ++-- .../\344\275\234\344\270\232/1104/111.html" | 46 +++++++++ .../1104/\351\252\260\345\255\220.html" | 93 +++++++++++++++++++ 3 files changed, 148 insertions(+), 9 deletions(-) create mode 100644 "\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1104/111.html" create mode 100644 "\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1104/\351\252\260\345\255\220.html" diff --git "a/\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1028/10281.html" "b/\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1028/10281.html" index 3365abc..de1885e 100644 --- "a/\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1028/10281.html" +++ "b/\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1028/10281.html" @@ -65,17 +65,17 @@ margin-left: 500px;

亲亲亲抱抱抱老婆

- 《大鱼》
- 作者：利民
- 亲亲亲抱抱抱老婆 +

《大鱼》

+

作者：利民

+

亲亲亲抱抱抱老婆

-
《大鱼》
- 作者：利民
- 亲亲亲抱抱抱老婆
+

《大鱼》

+

作者：利民

+

亲亲亲抱抱抱老婆

- 《大鱼》
- 作者：利民
- 亲亲亲抱抱抱老婆 +

《大鱼》

+

作者：利民

+

亲亲亲抱抱抱老婆

\ No newline at end of file diff --git "a/\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1104/111.html" "b/\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1104/111.html" new file mode 100644 index 0000000..6d43980 --- /dev/null +++ "b/\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1104/111.html" @@ -0,0 +1,46 @@ + + + + + + Document + + + +
+
+
+
+
+ + \ No newline at end of file diff --git "a/\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1104/\351\252\260\345\255\220.html" "b/\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1104/\351\252\260\345\255\220.html" new file mode 100644 index 0000000..f93a1d5 --- /dev/null +++ "b/\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1104/\351\252\260\345\255\220.html" @@ -0,0 +1,93 @@ + + + + + + Document + + + +
+
+

+
+
+

+

+
+
+

+

+

+
+
+

+

+

+

+
+
+
+
+
+
+
+ + \ No newline at end of file -- Gitee From 83c2403e5cca28dba8c0f751a88ab3f6a0e1cf3b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E4=BC=9F=E9=91=AB?= <14089910+cwx050211@user.noreply.gitee.com> Date: Tue, 5 Nov 2024 14:56:06 +0000 Subject: [PATCH 2/2] 202241103 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 陈伟鑫 <14089910+cwx050211@user.noreply.gitee.com> --- .../\347\254\224\350\256\260/202241103.md" | 83 +++++++++++++++++++ 1 file changed, 83 insertions(+) create mode 100644 "\351\231\210\344\274\237\351\221\253/\347\254\224\350\256\260/202241103.md" diff --git "a/\351\231\210\344\274\237\351\221\253/\347\254\224\350\256\260/202241103.md" "b/\351\231\210\344\274\237\351\221\253/\347\254\224\350\256\260/202241103.md" new file mode 100644 index 0000000..7f513bc --- /dev/null +++ "b/\351\231\210\344\274\237\351\221\253/\347\254\224\350\256\260/202241103.md" @@ -0,0 +1,83 @@ +# flex属性基本概念 + +默认文档流中，在一个父级容器防止多个块级的子元素，这些子元素会默认从上往下排列。 + +在此基础之上，如果给父容器加一个 `display: flex`属性，此时，这些子元素的布局就会大大改变 + +子元素们会**在水平方向上，从左至右排列**。 + +### flex 布局的优势 + +1、**flex 布局的子元素不会脱离文档流**，很好地遵从了“流的特性”。 + +但你如果用 float 来做布局，float 属性的元素会脱离文档流，而且会涉及到各种 BFC、清除浮动的问题。浮动相关的问题，比较麻烦，所以也成了面试必问的经典题目。但有了 flex 布局之后，这些问题都不存在的。 + +2、**flex 是一种现代的布局方式，是 W3C 第一次提供真正用于布局的 CSS 规范**。 flex 非常提供了丰富的属性，非常灵活，让布局的实现更佳多样化，且方便易用。 + +flex 唯一的缺点就在于，它不支持低版本的 IE 浏览器。 + +### 概念：弹性盒子、子元素 + +- **弹性盒子**：指的是使用 `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` 拉伸 \ No newline at end of file -- Gitee