本篇文章详细介绍justify-content
justify-content的几种属性
flex-start:弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线,而后续弹性项依次平齐摆放。
flex-end:弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线,而后续弹性项依次平齐摆放。
center:弹性项目居中紧挨着填充。(如果剩余的自由空间是负的,则弹性项目将在两个方向上同时溢出)。
space-between:弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项,则该值等同于flex-start。否则,第1个弹性项的外边距和行的main-start边线对齐,而最后1个弹性项的外边距和行的main-end边线对齐,然后剩余的弹性项分布在该行上,相邻项目的间隔相等。
space-around:将父元素内剩余的空间等分成子元素+2份 的间距
//第一种属性 flex-start; 默认属性 沿着左边填充
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.flex-box{
width: 1000px;
margin: 0 auto;
background-color: #ccc;
display: flex;
justify-content: flex-start;
}
.box{
width: 200px;
height: 100px;
background-color: red;
color: blue;
}
</style>
</head>
<body>
<div class="flex-box">
<div class="box">1111111</div>
<div class="box">222222</div>
<div class="box">3333</div>
</div>
</body>
</html>
效果演示如下:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/8364573c0ee0e2f9e54a0322adbfb8de.png)
//第二种属性 flex-end; 默认属性 全部的子元素靠右 但是和float:rigth不一样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.flex-box{
width: 1000px;
margin: 0 auto;
background-color: #ccc;
display: flex;
justify-content: flex-end;
}
.box{
width: 200px;
height: 100px;
background-color: red;
color: blue;
}
</style>
</head>
<body>
<div class="flex-box">
<div class="box">1111111</div>
<div class="box">222222</div>
<div class="box">3333</div>
</div>
</body>
</html>
效果演示如下:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/eea3a3ca21308fcb46669fea16e15024.png)
//第三种 center; 将子元素居中显示 类似于margin:0 auto;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.flex-box{
width: 1000px;
margin: 0 auto;
background-color: #ccc;
display: flex;
justify-content: center;
height: 200px;
}
.box{
width: 200px;
height: 100px;
background-color: red;
color: blue;
}
</style>
</head>
<body>
<div class="flex-box">
<div class="box">1111111</div>
<div class="box">222222</div>
<div class="box">3333</div>
</div>
</body>
</html>
效果演示如下:
![效果描述](https://i-blog.csdnimg.cn/blog_migrate/cb1dbcda7e359c109fa575b09bcea0c0.png)
//第四种属性 space-between 将剩余的空间等分 若是两个盒子就是一个靠左一个靠右 盒子多就是等分间距 靠着两边
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.flex-box{
width: 1000px;
margin: 0 auto;
background-color: #ccc;
display: flex;
justify-content: space-between;
height: 200px;
}
.box{
width: 200px;
height: 100px;
background-color: red;
color: blue;
}
</style>
</head>
<body>
<div class="flex-box">
<div class="box">1111111</div>
<div class="box">222222</div>
<div class="box">3333</div>
</div>
</body>
</html>
效果演示如下:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/6d353515a19b9da338ed4ea8b9d1f0c1.png)
//第五种属性 space-around; 也是等分间距只不过两边一样算上等分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.flex-box{
width: 1000px;
margin: 0 auto;
background-color: #ccc;
display: flex;
justify-content: space-around;
height: 200px;
}
.box{
width: 200px;
height: 100px;
background-color: red;
color: blue;
}
</style>
</head>
<body>
<div class="flex-box">
<div class="box">1111111</div>
<div class="box">222222</div>
<div class="box">3333</div>
</div>
</body>
</html>
效果演示如下
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e41f864e9d0cdcb29998459575b0a521.png)