flex布局
flex布局
一、flex布局案例
display:flex;
flex-direction: row;//排序的方向，row代表横向排列，column代表纵向排列
justify-content: center;//排列方向的居中
align-items: center;//表示和排列方向对应的垂直方向的居中
flex-wrap: wrap;//换行二、代码实战
新建 html 文件 12-flex.html ，编写下方程序，运行看看效果吧
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>flex布局</title>
<styletype="text/css">
.out-div{
width:500px;
height:600px;
background-color: yellow;
padding:15px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.in-div{
width:100px;
height:100px;
background-color: tomato;
margin:15px;
}
</style>
</head>
<body>
<divclass="out-div">
<divclass="in-div"></div>
<divclass="in-div"></div>
<divclass="in-div"></div>
</div>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2023 年 04 月，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
