上传文件至 flex布局

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;
+}

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;
+}

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;
+}

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;
+}

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;
+}