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