flex弹性布局的应用一之属性组合
程序员文章站
2022-03-10 20:01:02
...
以下四种属性由不同的属性值进行组合，会产生不同的变化，很是奇妙，学会如何运用会有很大帮助。我写的是我经常用的几种组合方式，供大家借鉴。
一、四种属性组合使用1
在 content类 中加入此代码可实现如图所示布局
display: flex; //弹性布局
flex-direction: row; //弹性盒元素的方向
justify-content: center; //主轴（水平）方向的对齐。对齐方式
align-items: center; //侧轴（垂直）方向的对齐。center属性值是中心对齐。用的多的就是center。
二、四种属性组合使用2
在 content类 中加入此代码可实现如图所示布局
display: flex;
flex-direction: row;
justify-content: space-between; //两端对齐
align-items: center;
三、四种属性组合使用3
在 content类 中加入此代码可实现如图所示布局
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
flex-direction的属性值参考：https://www.runoob.com/cssref/css3-pr-flex-direction.html
justify-content的属性值参考：https://www.runoob.com/cssref/css3-pr-justify-content.html
主要代码
<html>
<head>
<title>flex布局的应用</title>
<style type="text/css">
.content{
width: 800px;
height: 400px;
background-color:#dbdbdb;
}
.c-1{
width: 115px;
height: 180px;
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>