flex弹性盒子常用的布局属性详解
想必大家在开发中经常会用到flex布局。而且还会经常用到 justify-content 属性实现分栏等等
接下来给大家分别讲一下 justify-content 的属性值。
以下是我敲的效果图大家可以清晰看出区别
space-between 属性值可以就是说两端对齐
space-evenly 属性值是每个盒子之间的间距相同
space-around 属性值是第一个盒子和最后一个盒子他们是相邻元素之间距离的一半。
如果大家还是不清楚可以建个html 把我的代码粘进去看看效果。
源码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.boxs1 {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.boxs2 {
display: flex;
justify-content: space-evenly;
margin-top: 20px;
}
.boxs3 {
display: flex;
justify-content: space-around;
margin-top: 20px;
}
.box {
width: 200px;
height: 200px;
background-color: pink;
margin-left: 20px;
}
.box1 {
width: 200px;
height: 200px;
background-color: royalblue;
margin-left: 20px;
}
.box2 {
width: 200px;
height: 200px;
background-color: red;
margin-left: 20px;
}
.box3 {
width: 200px;
height: 200px;
background-color: blanchedalmond;
margin-left: 20px;
}
.box4 {
width: 200px;
height: 200px;
background-color: blue;
margin-left: 20px;
}
</style>
<body>
<div class="boxs1">
<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
<div class="boxs2">
<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
<div class="boxs3">
<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</body>
</html>