上节我们讲了flex布局父项常见属性的flex-direction,这节我们就说一下justify-content这个属性。
justify-content
1.justify-content 设置主轴上的子元素排列方式
justify-content属性定义了项目在主轴上的对齐方式
注意:使用这个属性之前一定要确认好主轴是哪个(主轴的确认方式在上一节有)
声明,这里我统一拿主轴是y轴举列子 ,那么侧轴就是y轴
1) flex-start:默认值,从头部开始,如果主轴是x轴,则从右到左
HTML代码
<body>
<div>
<span>1</span>
<!--在flex布局中所有元素都有高度和宽度,不用再转化了 -->
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</body>
CSS代码
<style>
div {
display: flex;
width: 800px;
height: 400px;
background-color: aquamarine;
/* 设置主轴为x轴,如果不设置默认元素是跟着主轴来排列的 */
flex-direction: row;
/* justify-content:是设置主轴上子元素的排列方式 ,使用的时候一定要设置主轴,不设置默认主轴为x轴*/
/*默认状态 从头部开始 如果主轴是x轴,则从左到右*/
justify-content: flex-start;
}
div span {
width: 150px;
height: 75px;
background-color: antiquewhite;
}
</style>
打开浏览器
如图所示,子元素在一行上靠左对其依次排列,如果主轴是y轴,那子元素在一竖列上靠上依次排列。
2) flex-end:从尾部开始排列
HTML代码
<body>
<div>
<span>1</span>
<!--在flex布局中所有元素都有高度和宽度,不用再转化了 -->
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</body>
CSS代码
<style>
div {
display: flex;
width: 800px;
height: 400px;
background-color: aquamarine;
/* 默认元素是跟着主轴来排列的 */
flex-direction: row;
/* 从尾部开始排列 */
justify-content: flex-end;
}
div span {
width: 150px;
height: 75px;
background-color: antiquewhite;
}
</style>
打开浏览器
注意,如图所示,子元素在一行上只是靠右依次排列,这个要和flex-direction:row-reverse区分开,如果主轴是y轴,那子元素在一竖列上靠下依次排列。
3)center:在**主轴居中对齐(**如果主轴是x轴,则水平居中)
HTML代码
<body>
<div>
<span>1</span>
<!--在flex布局中所有元素都有高度和宽度,不用再转化了 -->
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</body>
CSS代码
<style>
div {
display: flex;
width: 800px;
height: 400px;
background-color: aquamarine;
/* 默认元素是跟着主轴来排列的 */
flex-direction: row;
/* 子元素居中对齐 */
justify-content: center;
}
div span {
width: 150px;
height: 75px;
background-color: antiquewhite;
}
</style>
打开浏览器
4)space-around:平分剩余空间
HTML代码
<body>
<div>
<span>1</span>
<!--在flex布局中所有元素都有高度和宽度,不用再转化了 -->
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</body>
CSS代码
<style>
div {
display: flex;
width: 800px;
height: 400px;
background-color: aquamarine;
/* 默认元素是跟着主轴来排列的 */
flex-direction: row;
/* 平分剩余空间 */
justify-content: space-around;
}
div span {
width: 150px;
height: 75px;
background-color: antiquewhite;
}
</style>
打开浏览器
如图所示,元素均匀分布
5)space-between:先两边贴边,再平分剩余空间(重要)
HTML代码
<body>
<div>
<span>1</span>
<!--在flex布局中所有元素都有高度和宽度,不用再转化了 -->
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</body>
CSS代码
<style>
div {
display: flex;
width: 800px;
height: 400px;
background-color: aquamarine;
/* 默认元素是跟着主轴来排列的 */
flex-direction: row;
/* 先两边贴边,再分配剩余的空间 */
justify-content: space-between;
}
div span {
width: 150px;
height: 75px;
background-color: antiquewhite;
}
</style>
打开浏览器
如图所示,1号盒子和4号盒子都分别贴向父盒子的两侧边缘,其他盒子平分剩余空间