From 41c299906087144a7ffa651f1eaa177600a49416 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9F=A6=E8=AF=97=E8=AF=97?= <2146499714@qq.com>
Date: Mon, 28 Oct 2024 23:31:58 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B9=88=E4=B9=88=E4=B9=88=E4=B9=88=E9=B8=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../\350\277\207\346\270\2414.html" | 2 +-
.../flex\345\270\203\345\261\2001.html" | 32 +++
.../flex\345\270\203\345\261\2006.html" | 228 ++++++++++++++++++
.../\345\270\203\345\261\2002.html" | 35 +++
.../\345\270\203\345\261\2003.html" | 34 +++
.../\345\270\203\345\261\2004.html" | 33 +++
.../\345\270\203\345\261\2005.html" | 42 ++++
...024-10-28-flex\345\270\203\345\261\200.md" | 71 ++++++
8 files changed, 476 insertions(+), 1 deletion(-)
create mode 100644 "\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-28/flex\345\270\203\345\261\2001.html"
create mode 100644 "\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-28/flex\345\270\203\345\261\2006.html"
create mode 100644 "\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-28/\345\270\203\345\261\2002.html"
create mode 100644 "\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-28/\345\270\203\345\261\2003.html"
create mode 100644 "\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-28/\345\270\203\345\261\2004.html"
create mode 100644 "\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-28/\345\270\203\345\261\2005.html"
create mode 100644 "\351\237\246\350\257\227\350\257\227/\347\254\224\350\256\260/2024-10-28-flex\345\270\203\345\261\200.md"
diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/\350\277\207\346\270\2414.html" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/\350\277\207\346\270\2414.html"
index 21bef54..da45de4 100644
--- "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/\350\277\207\346\270\2414.html"
+++ "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-24/\350\277\207\346\270\2414.html"
@@ -19,7 +19,7 @@
img {
width: 100%;
- transition: all 1.5s;
+ transition: all 1.5s;
position: absolute;
left: 0;
top: 0;
diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-28/flex\345\270\203\345\261\2001.html" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-28/flex\345\270\203\345\261\2001.html"
new file mode 100644
index 0000000..2a263cb
--- /dev/null
+++ "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-28/flex\345\270\203\345\261\2001.html"
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+ Document
+
+
+
+
+
+ 1
+ 1
+ 1
+
+
+
+
\ No newline at end of file
diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-28/flex\345\270\203\345\261\2006.html" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-28/flex\345\270\203\345\261\2006.html"
new file mode 100644
index 0000000..bd2263c
--- /dev/null
+++ "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-28/flex\345\270\203\345\261\2006.html"
@@ -0,0 +1,228 @@
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-28/\345\270\203\345\261\2002.html" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-28/\345\270\203\345\261\2002.html"
new file mode 100644
index 0000000..0ba92e3
--- /dev/null
+++ "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-28/\345\270\203\345\261\2002.html"
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+ Document
+
+
+
+
+
+ 1
+ 1
+ 1
+
+
+
+
\ No newline at end of file
diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-28/\345\270\203\345\261\2003.html" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-28/\345\270\203\345\261\2003.html"
new file mode 100644
index 0000000..9bd471d
--- /dev/null
+++ "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-28/\345\270\203\345\261\2003.html"
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+ Document
+
+
+
+
+
+ 1
+ 2
+ 3
+
+
+
+
\ No newline at end of file
diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-28/\345\270\203\345\261\2004.html" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-28/\345\270\203\345\261\2004.html"
new file mode 100644
index 0000000..a642154
--- /dev/null
+++ "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-28/\345\270\203\345\261\2004.html"
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+ Document
+
+
+
+
+
+ 1
+ 2
+ 3
+
+
+
+
\ No newline at end of file
diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-28/\345\270\203\345\261\2005.html" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-28/\345\270\203\345\261\2005.html"
new file mode 100644
index 0000000..5b3d71a
--- /dev/null
+++ "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-10-28/\345\270\203\345\261\2005.html"
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+ Document
+
+
+
+
+
+ 1
+ 2
+ 3
+ 1
+ 2
+ 3
+ 3
+ 3
+
+
+
+
+
+
\ No newline at end of file
diff --git "a/\351\237\246\350\257\227\350\257\227/\347\254\224\350\256\260/2024-10-28-flex\345\270\203\345\261\200.md" "b/\351\237\246\350\257\227\350\257\227/\347\254\224\350\256\260/2024-10-28-flex\345\270\203\345\261\200.md"
new file mode 100644
index 0000000..6e8f56f
--- /dev/null
+++ "b/\351\237\246\350\257\227\350\257\227/\347\254\224\350\256\260/2024-10-28-flex\345\270\203\345\261\200.md"
@@ -0,0 +1,71 @@
+# flex布局（父项）
+
+弹性布局（任何一个盒子都可以指定为flex布局）
+
+设了flex布局后，子元素的float，clear和vertical-align属性将失效
+
+**布局原理：给父盒子添加flex属性，来控制子盒子的位置和排列方式**
+
+## 常见父项属性：
+
+##### 1.flex-direction:设置主轴的方向（默认x为主轴，y为侧轴，可设y轴为主轴，那么x轴为侧轴）
+
+- **row（默认从左往右,x轴）**
+
+- row-reverse(右往左)
+
+- **column(从上往下，y轴)**
+
+- column-reverse(从下往上)
+
+
+
+##### 2.justify-content:设置主轴上的子元素排列方式（定义对齐方式，默认为x轴）
+
+- flex-start(默认从头部开始，如果主轴是x，则从左往右)
+
+- flex-end(从尾部开始排列)
+
+- **center（在主轴居中对齐，主轴是x，则水平居中）**
+
+- **space-around(平分剩余空间)**
+
+- **space-between(先贴两边再平分剩余空间)**重要！！
+
+
+
+##### 3.flex-wray:设置子元素是否换行（flex中默认的子元素是不换行的）
+
+- nowrap(默认不换行)
+
+- wray(换行)
+
+
+
+##### 4.align-content:侧轴的排列方式（多行，子轴出现**换行情况**）
+
+- flex-start(从上到下)
+
+- flex-end(从下到上)
+
+- center（在侧轴中间显示）
+
+- **space-around(子项在侧轴平分剩余空间)**
+
+- space-between(子项在侧轴先分布在两头，在平分剩余空间)
+
+- stretch(拉伸，子元素高度平分父元素高度)
+
+
+
+##### 5.align-items:设置侧轴的排列方式（单行，默认y轴）
+
+- flex-start(从上到下)
+- flex-end(从下到上)
+- **center（侧轴垂直居中）**重要！！
+- stretch(拉伸 少用 盒子不要给高度)
+
+
+
+flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap（即主轴方向和子元素是否换行）
+
--
Gitee