From 3091c6108e37e7721eece66704ae0f440149f6cb Mon Sep 17 00:00:00 2001
From: infinite <3537514482@qq.com>
Date: Wed, 20 Mar 2024 20:54:41 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E6=96=87=E4=BB=B6=E8=87=B3?=
 =?UTF-8?q?=20flex=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 flex布局/contain1.css   | 20 ++++++++++++++++++++
 flex布局/container.css  | 13 +++++++++++++
 flex布局/container2.css | 17 +++++++++++++++++
 flex布局/container3.css | 21 +++++++++++++++++++++
 flex布局/container4.css | 22 ++++++++++++++++++++++
 5 files changed, 93 insertions(+)
 create mode 100644 flex布局/contain1.css
 create mode 100644 flex布局/container.css
 create mode 100644 flex布局/container2.css
 create mode 100644 flex布局/container3.css
 create mode 100644 flex布局/container4.css

diff --git a/flex布局/contain1.css b/flex布局/contain1.css
new file mode 100644
index 0000000..676102c
--- /dev/null
+++ b/flex布局/contain1.css
@@ -0,0 +1,20 @@
+.container1{
+    width: 400px;
+    height: 400px;
+    background-color: aqua;
+    display: flex;
+    justify-content: space-around;
+    /*
+    等分每个内部盒子的间距
+    */
+    flex-wrap:wrap;
+    /* 实现多行显示 */
+    align-content: space-around;
+    /* 均匀分布项目 */
+
+}
+.inter{
+    width:120px;
+    height: 120px;
+    background-color: blue;
+}
\ No newline at end of file
diff --git a/flex布局/container.css b/flex布局/container.css
new file mode 100644
index 0000000..2b18b12
--- /dev/null
+++ b/flex布局/container.css
@@ -0,0 +1,13 @@
+.num1{
+    width:400px;
+    height: 400px;
+    background-color: aqua;
+    display:flex;
+    justify-content: center;
+    align-items: center;
+}
+.inter{
+    width: 150px;
+    height: 150px;
+    background-color: red;
+}
\ No newline at end of file
diff --git a/flex布局/container2.css b/flex布局/container2.css
new file mode 100644
index 0000000..bb0b7d2
--- /dev/null
+++ b/flex布局/container2.css
@@ -0,0 +1,17 @@
+.container2{
+    width: 400px;
+    height: 400px;
+    background-color: aqua;
+    display: flex;
+    justify-content: space-between;
+    /* 均匀分布的布局，第一项与起始点齐平，第二项与终止点齐平 */
+}
+.inter{
+    width: 120px;
+    height: 120px;
+    background-color: blue;
+}
+.container2 div:nth-of-type(2){
+    /* 伪类用于单个参数指定，该参数表示匹配元素的模式 */
+    align-self: flex-end;
+}
\ No newline at end of file
diff --git a/flex布局/container3.css b/flex布局/container3.css
new file mode 100644
index 0000000..9486dce
--- /dev/null
+++ b/flex布局/container3.css
@@ -0,0 +1,21 @@
+.container3{
+    width: 400px;
+    height: 400px;
+    background-color: aqua;
+    display: flex;
+    justify-content: space-between;
+}
+.inter{
+    
+    width: 100px;
+    height: 100px;
+    background-color: blue;
+}
+.container3 div:nth-of-type(2){
+    /* 伪类用于单个参数指定，该参数表示匹配元素的模式 */
+    align-self: center;
+}
+.container3 div:nth-of-type(3){
+    /* 伪类用于单个参数指定，该参数表示匹配元素的模式 */
+    align-self: flex-end;
+}
\ No newline at end of file
diff --git a/flex布局/container4.css b/flex布局/container4.css
new file mode 100644
index 0000000..dd36717
--- /dev/null
+++ b/flex布局/container4.css
@@ -0,0 +1,22 @@
+.container4{
+    width: 400px;
+    height: 400px;
+    background-color: aqua;
+    display:flex;
+    justify-content: space-between;
+}
+.inter{
+    width: 120px;
+    height: 120px;
+    background-color: blue;
+}
+.first{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+.second{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
\ No newline at end of file