三个div呈品字形排列用css3的flex方式怎么写?
3个回答
展开全部
既然楼主说是弹性盒，那就用弹性盒的相关术语来进行分析。
首先分析图片，一个大容器中包含三个项目，你会发现单纯的给容器加一个display:flex;的声明是不可以的，因为这个声明默认容器内的项目在一行显示，并且不会溢出。
那么我们就需要一个声明让项目遇到容器边界时自动换行，就是flex-wrap: wrap;这个声明。
换行之后你会发现项目与容器的边界是挨在一起的，从图中明显可以看出项目div1在主轴上是居中显示的，三个项目在交叉轴上又是居中，那么
justify-content: space-around;表示 自动分配距离，每个项目两侧的间隔相等。
align-items: center;表示交叉轴居中。
参考代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
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;}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
或者第二个参考代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
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;}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
