From 8279d026e64a60d61f0c7f6c8a2b5839aa6dae34 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=95=E5=98=89=E6=80=A1=E5=A4=A7=E5=B8=85=E5=93=A5?=
 <2654312426@qq.com>
Date: Mon, 4 Nov 2024 10:40:11 +0800
Subject: [PATCH] 1028

---
 .../1.txt"                                    |   0
 .../1.html"                                   |   0
 .../2.html"                                   |   0
 .../3.html"                                   |   0
 .../4.html"                                   |   0
 ...\273\272 DOC \346\226\207\346\241\243.txt" | 228 ++++++++++++++++++
 .../20241028-flex\345\270\203\345\261\200.md" |  54 +++++
 .../20241028.html"                            | 195 +++++++++++++++
 8 files changed, 477 insertions(+)
 rename "\344\275\225\345\230\211\346\200\241/\346\226\260\345\273\272 \346\226\207\346\234\254\346\226\207\346\241\243.txt" => "\344\275\225\345\230\211\346\200\241/1.txt" (100%)
 rename "\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/1.txt" => "\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/1.html" (100%)
 rename "\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/2.txt" => "\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/2.html" (100%)
 rename "\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/3.txt" => "\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/3.html" (100%)
 rename "\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/4.txt" => "\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/4.html" (100%)
 create mode 100644 "\344\275\225\345\230\211\346\200\241/20241024-\351\252\260\345\255\220\344\275\234\344\270\232/\346\226\260\345\273\272 DOC \346\226\207\346\241\243.txt"
 create mode 100644 "\344\275\225\345\230\211\346\200\241/20241028-flex\345\270\203\345\261\200.md"
 create mode 100644 "\344\275\225\345\230\211\346\200\241/20241028-flex\345\270\203\345\261\200\344\275\234\344\270\232/20241028.html"

diff --git "a/\344\275\225\345\230\211\346\200\241/\346\226\260\345\273\272 \346\226\207\346\234\254\346\226\207\346\241\243.txt" "b/\344\275\225\345\230\211\346\200\241/1.txt"
similarity index 100%
rename from "\344\275\225\345\230\211\346\200\241/\346\226\260\345\273\272 \346\226\207\346\234\254\346\226\207\346\241\243.txt"
rename to "\344\275\225\345\230\211\346\200\241/1.txt"
diff --git "a/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/1.txt" "b/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/1.html"
similarity index 100%
rename from "\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/1.txt"
rename to "\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/1.html"
diff --git "a/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/2.txt" "b/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/2.html"
similarity index 100%
rename from "\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/2.txt"
rename to "\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/2.html"
diff --git "a/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/3.txt" "b/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/3.html"
similarity index 100%
rename from "\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/3.txt"
rename to "\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/3.html"
diff --git "a/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/4.txt" "b/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/4.html"
similarity index 100%
rename from "\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/4.txt"
rename to "\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/4.html"
diff --git "a/\344\275\225\345\230\211\346\200\241/20241024-\351\252\260\345\255\220\344\275\234\344\270\232/\346\226\260\345\273\272 DOC \346\226\207\346\241\243.txt" "b/\344\275\225\345\230\211\346\200\241/20241024-\351\252\260\345\255\220\344\275\234\344\270\232/\346\226\260\345\273\272 DOC \346\226\207\346\241\243.txt"
new file mode 100644
index 0000000..7d1b800
--- /dev/null
+++ "b/\344\275\225\345\230\211\346\200\241/20241024-\351\252\260\345\255\220\344\275\234\344\270\232/\346\226\260\345\273\272 DOC \346\226\207\346\241\243.txt"	
@@ -0,0 +1,228 @@
+                         <!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <style>
+    body {
+      margin: 10px 0 0 0;
+      display: flex;
+      justify-content: space-around;
+    }
+
+    body>div {
+      display: flex;
+      width: 100px;
+      height: 100px;
+      border-radius: 4px;
+      border: 2px solid orangered;
+      box-sizing: border-box;
+    }
+
+    p {
+      width: 15px;
+      height: 15px;
+      background-color: black;
+      border-radius: 50%;
+      margin: 2px;
+    }
+
+    .div1 {
+      justify-content: center;
+      align-items: center;
+    }
+
+    .div2 {
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-around;
+    }
+
+    .div3 {
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-around;
+    }
+
+    .div3 p:nth-child(1) {
+      align-self: flex-start;
+    }
+
+    .div3 p:nth-child(3) {
+      align-self: flex-end;
+    }
+
+    .div4 {
+      flex-direction: column;
+      justify-content: space-around;
+    }
+
+    .div4 div {
+      display: flex;
+      justify-content: space-around;
+    }
+
+    .div5 {
+      flex-direction: column;
+      justify-content: space-around;
+    }
+
+    .div5 div {
+      display: flex;
+      justify-content: space-around;
+    }
+
+    .div6 {
+      flex-direction: column;
+      justify-content: space-around;
+    }
+
+    .div6 div {
+      display: flex;
+      justify-content: space-around;
+    }
+
+    .div7 {
+      flex-direction: column;
+      justify-content: space-around;
+    }
+
+    .div7 div {
+      display: flex;
+      justify-content: space-around;
+    }
+
+    .div8 {
+      flex-direction: column;
+      justify-content: space-around;
+    }
+
+    .div8 div {
+      display: flex;
+      justify-content: space-around;
+    }
+
+    .div9 {
+      flex-direction: column;
+      justify-content: space-around;
+    }
+
+    .div9 div {
+      display: flex;
+      justify-content: space-around;
+    }
+  </style>
+</head>
+
+<body>
+  <!-- 骰子1 -->
+  <div class="div1">
+    <p></p>
+  </div>
+  <!-- 骰子2 -->
+  <div class="div2">
+    <p></p>
+    <p></p>
+  </div>
+  <!-- 骰子3 -->
+  <div class="div3">
+    <p></p>
+    <p></p>
+    <p></p>
+  </div>
+  <!-- 骰子4 -->
+  <div class="div4">
+    <div>
+      <p></p>
+      <p></p>
+    </div>
+    <div>
+      <p></p>
+      <p></p>
+    </div>
+  </div>
+  <!-- 骰子5 -->
+  <div class="div5">
+    <div>
+      <p></p>
+      <p></p>
+    </div>
+    <div>
+      <p></p>
+    </div>
+    <div>
+      <p></p>
+      <p></p>
+    </div>
+  </div>
+  <!-- 骰子6 -->
+  <div class="div6">
+    <div>
+      <p></p>
+      <p></p>
+    </div>
+    <div>
+      <p></p>
+      <p></p>
+    </div>
+    <div>
+      <p></p>
+      <p></p>
+    </div>
+  </div>
+  <!-- 骰子7 -->
+  <div class="div7">
+    <div>
+      <p></p>
+      <p></p>
+      <p></p>
+    </div>
+    <div>
+      <p></p>
+    </div>
+    <div>
+      <p></p>
+      <p></p>
+      <p></p>
+    </div>
+  </div>
+  <!-- 骰子8 -->
+  <div class="div8">
+    <div>
+      <p></p>
+      <p></p>
+      <p></p>
+    </div>
+    <div>
+      <p></p>
+      <p></p>
+    </div>
+    <div>
+      <p></p>
+      <p></p>
+      <p></p>
+    </div>
+  </div>
+  <!-- 骰子9 -->
+  <div class="div9">
+    <div>
+      <p></p>
+      <p></p>
+      <p></p>
+    </div>
+    <div>
+      <p></p>
+      <p></p>
+      <p></p>
+    </div>
+    <div>
+      <p></p>
+      <p></p>
+      <p></p>
+    </div>
+  </div>
+</body>
+
+</html>                                                                                                          
\ No newline at end of file
diff --git "a/\344\275\225\345\230\211\346\200\241/20241028-flex\345\270\203\345\261\200.md" "b/\344\275\225\345\230\211\346\200\241/20241028-flex\345\270\203\345\261\200.md"
new file mode 100644
index 0000000..3ad6c1b
--- /dev/null
+++ "b/\344\275\225\345\230\211\346\200\241/20241028-flex\345\270\203\345\261\200.md"
@@ -0,0 +1,54 @@
+                  ### 概念：弹性盒子、子元素
+
+在讲 flex 的知识点之前，我们事先约定两个概念：
+
+- **弹性盒子**：指的是使用 `display:flex` 或 `display:inline-flex` 声明的**父容器**。
+
+- **子元素/弹性元素**：指的是父容器里面的子元素们（父容器被声明为 flex 盒子的情况下）。
+
+### 概念：主轴和侧轴
+
+弹性盒子里面的子元素们，默认是从左至右排列的，这个方向，代表的就是主轴的方向。
+
+- 主轴：flex容器的主轴，默认是水平方向，从左向右。
+
+- 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向，从上往下。
+
+### flex-direction 属性
+
+主轴和侧轴并不是固定不变的，可以通过 `flex-direction` 更换方向
+`flex-direction`：用于设置盒子中**子元素**的排列方向。属性值可以是：
+
+| 属性值 | 描述 |
+|:-------------|:-------------|
+| row | 从左到右水平排列子元素（默认值） |
+|column|从上到下垂直排列子元素|
+| row-reverse |从右向左排列子元素 |
+|column-reverse|从下到上垂直排列子元素|
+
+备注：如果我们不给父容器写`flex-direction`这个属性，那么，子元素默认就是从左到右排列的。
+
+### flex-wrap 属性
+
+`flex-wrap：wrap`换行
+`flex-wrap：no-wrap`不换行
+
+
+### 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
diff --git "a/\344\275\225\345\230\211\346\200\241/20241028-flex\345\270\203\345\261\200\344\275\234\344\270\232/20241028.html" "b/\344\275\225\345\230\211\346\200\241/20241028-flex\345\270\203\345\261\200\344\275\234\344\270\232/20241028.html"
new file mode 100644
index 0000000..b3494af
--- /dev/null
+++ "b/\344\275\225\345\230\211\346\200\241/20241028-flex\345\270\203\345\261\200\344\275\234\344\270\232/20241028.html"
@@ -0,0 +1,195 @@
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .one{
+        .one {
+            width: 100px;
+            height: 100px;
+            border: 2px solid red;
+@@ -13,13 +14,18 @@
+            justify-content: center;
+            align-items: center;
+        }
+        .round{
+
+        .round {
+            width: 0;
+            height: 0;
+            border: 8px solid black;
+            border-radius: 80%;
+        }
+        .two,.three,.four{
+
+        .two,
+        .three,
+        .four,
+        .five {
+            width: 100px;
+            height: 100px;
+            border: 2px solid red;
+@@ -30,36 +36,153 @@
+            justify-content: center;
+            justify-content: space-around;
+        }
+        .t1{
+
+        .t1 {
+            margin-left: -54px;
+        }
+        .t5{
+
+        .t2 {
+            margin-right: -54px;
+        }
+
+        .f1 {
+            width: 100px;
+            height: 50px;
+            display: flex;
+            justify-content: center;
+            justify-content: space-around;
+            align-items: center;
+        }
+
+        .f2 {
+            width: 100px;
+            height: 50px;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+        }
+        .f2 div:nth-child(1){
+            margin-left: -18px;
+        }
+        .f2 div:nth-child(2){
+            margin-right: -18px;
+        }
+    </style>
+</head>
+
+<body>
+    <!-- 一点 -->
+    <!-- <div class="one">
+        <div class="round"></div>
+    </div> -->
+
+    <!-- 二点 -->
+    <!-- <div class="two">
+        <div class="t1 round"></div>
+        <div class="t2 round"></div>
+        <div class="round"></div>
+        <div class="round"></div>
+    </div> -->
+
+    <!-- 三点 -->
+    <!-- <div class="three">
+        <div class="t1 round"></div>
+        <div class="round"></div>
+        <div class="t2 round"></div>
+    </div> -->
+
+    <!-- 四点 -->
+    <!-- <div class="four">
+        <div class="f1"></div>
+        <div class="f2"></div>
+        <div class="f3"></div>
+        <div class="f4"></div>
+        <div class="f1">
+            <div class="round"></div>
+            <div class="round"></div>
+        </div>
+        <div class="f1">
+            <div class="round"></div>
+            <div class="round"></div>
+        </div>
+    </div> -->
+
+    <!-- 五点 -->
+    <!-- <div class="five">
+        <div class="f1">
+            <div class="round"></div>
+            <div class="round"></div>
+        </div>
+        <div class="round"></div>
+        <div class="f1">
+            <div class="round"></div>
+            <div class="round"></div>
+        </div>
+    </div> -->
+
+    <!-- 六点 -->
+    <!-- <div class="five">
+        <div class="f1">
+            <div class="round"></div>
+            <div class="round"></div>
+        </div>
+        <div class="f1">
+            <div class="round"></div>
+            <div class="round"></div>
+        </div>
+        <div class="f1">
+            <div class="round"></div>
+            <div class="round"></div>
+        </div>
+    </div> -->
+
+    <!-- 七点 -->
+    <!-- <div class="five">
+        <div class="f1">
+            <div class="round"></div>
+            <div class="round"></div>
+            <div class="round"></div>
+        </div>
+        <div class="f1">
+            <div class="round"></div>
+        </div>
+        <div class="f1">
+            <div class="round"></div>
+            <div class="round"></div>
+            <div class="round"></div>
+        </div>
+    </div> -->
+
+    <!-- 八点 -->
+    <!-- <div class="five">
+        <div class="f1">
+            <div class="round"></div>
+            <div class="round"></div>
+            <div class="round"></div>
+        </div>
+        <div class="f2">
+            <div class="round"></div>
+            <div class="round"></div>
+        </div>
+        <div class="f1">
+            <div class="round"></div>
+            <div class="round"></div>
+            <div class="round"></div>
+        </div>
+    </div> -->
+
+    <!-- 九点 -->
+      <div class="five">
+        <div class="f1">
+            <div class="round"></div>
+            <div class="round"></div>
+            <div class="round"></div>
+        </div>
+        <div class="f1">
+            <div class="round"></div>
+            <div class="round"></div>
+            <div class="round"></div>
+        </div>
+        <div class="f1">
+            <div class="round"></div>
+            <div class="round"></div>
+            <div class="round"></div>
+        </div>
+    </div>
+</body>
+
+</html>                                                                                                                                                                                                              
\ No newline at end of file
-- 
Gitee