html div 品字形排列,三个div呈品字形排列用css3的flex方式怎么写?

既然楼主说是弹性盒，那就用弹性盒的相关术语来进行分析。

首先分析图片，一个大容器中包含三个项目，你会发现单纯的给容器加一个display:flex;的声明是不可以的，因为这个声明默认容器内的项目在一行显示，并且不会溢出。

那么我们就需要一个声明让项目遇到容器边界时自动换行，就是flex-wrap: wrap;这个声明。

换行之后你会发现项目与容器的边界是挨在一起的，从图中明显可以看出项目div1在主轴上是居中显示的，三个项目在交叉轴上又是居中，那么

justify-content: space-around;表示 自动分配距离，每个项目两侧的间隔相等。

align-items: center;表示交叉轴居中。

参考代码如下：

html>

html,body{margin:0;padding:0;}

.box{width:500px;height:500px;border:1px solid #faa;margin:50px auto;

display:flex;

flex-wrap: wrap;

justify-content: space-around;

align-items: center;

}

.box div:nth-child(1){width:450px;height:200px;border:1px solid #faa;}

.box div:nth-child(2){width:200px;height: 150px;border:1px solid #faa;}

.box div:nth-child(3){width: 150px;height:100px;border:1px solid #faa;}

1

2

3

或者第二个参考代码如下

html>

html,body{margin:0;padding:0;}

.box{width:600px;height:500px;border:1px solid #faa;margin:50px auto;

padding:10px;

display:flex;

flex-wrap: wrap;

justify-content: space-between;

align-items: center;

}

.box div:nth-child(1){width:600px;height:200px;border:1px solid #faa;}

.box div:nth-child(2){width:260px;height: 150px;border:1px solid #faa;}

.box div:nth-child(3){width: 200px;height:100px;border:1px solid #faa;}

1

2

3