flex弹性布局的应用二之属性组合
程序员文章站
2022-05-26 22:23:57
...
这四种属性的组合方式是经常用到的。
一、组合方式1
display: flex; //弹性布局，伸缩布局
flex-direction: column; //弹性盒元素的方向，列，即垂直方向
justify-content: space-around; //主轴（水平）方向的对齐方式
align-items: center; //侧轴（垂直）方向的对齐方式。
二、组合方式2
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
二、组合方式3
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
在content类加入每种上述方式中的四行代码，即可实现不同的效果
主要代码
<!DOCTYPE html>
<html>
<head>
<title>flex布局的应用</title>
<style type="text/css">
.content{
width: 800px;
height: 400px;
background-color:#dbdbdb;
}
.c-1{
width: 115px;
height: 50px;
background-color:pink;
border: 1px solid #f44336;
}
</style>
</head>
<body>
<div class="content">
<div class="c-1">1</div>
<div class="c-1">2</div>
<div class="c-1">3</div>
<div class="c-1">4</div>
</div>
</body>
</html>
上一篇： 积分获取和消费的存储过程学习示例