Flex布局常见⽗项属性（⼆）-justify-content和flex-wrap 1. justify-content⽤于设置主轴上的⼦元素排列⽅式
justify-content属性定义了项⽬在主轴上的对其⽅式（使⽤前必须确定主轴是x轴还是y轴）
1.1. 属性值
justify-content属性值
属性值说明
flex-start从头部开始（如果主轴是x轴，从左到右）；默认值
flex-end从尾部开始排序
center在主轴居中对齐（如果主轴是x轴，则⽔平居中）
space-around平分剩余空间
space-between先贴合两边，再平分剩余空间
1.2. 案例
为⽗级添加flex属性，且设置主轴为x轴
/* ⽗级添加flex属性 */
display: flex;
/* flex-direction默认值row */
flex-direction: row;
1.设置justify-content属性值：flex-start
justify-content: flex-start;
页⾯效果展⽰ - 从头部开始
2.设置justify-content属性值：flex-end
与flex-direction: row-reverse 存在区别
flex-direction: row-reverse是⼀个⽔平翻转效果
justify-content: flex-end 是让⼦元素贴着尾部（以x轴为主轴的话，即贴着右边），⼦元素盒⼦的顺序不变
justify-content: flex-end;
页⾯效果展⽰ - 从尾部开始
3.设置justify-content属性值：content
justify-content: content;
页⾯效果展⽰ - 居中显⽰
4.设置justify-content属性值：space-around            justify-content: space-around;
页⾯效果展⽰ - 平分剩余空间
5.设置justify-content属性值：space-between            justify-content: space-between;
页⾯效果展⽰ - 先贴合两边再平分剩余空间
2.flex-wrap设置⼦元素是否换⾏
默认情况下，⼦元素项⽬都排在同⼀条线轴上，flex布局中默认是不换⾏的。如果⽗级元素宽度不够装下总的⼦元素，则会缩⼩⼦元素的宽度，才能够放进⽗级元素内
2.1属性值
flex-wrap属性值
属性值说明
nowrap不换⾏；默认值
wrap换⾏
2.2案例
1.以width:300px⽗级元素和4个width:100px⼦元素为例
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</body>
<style>
div{
width: 300px;
height: 300px;
background-color: skyblue;
color: white;
/* ⽗级添加flex属性 */
display: flex;
}
div span{
width: 100px;
height: 100px;
background-color: red;
}
</style>
页⾯效果展⽰ - 默认值以及flex-wrap: nowrap
可以看到⼦元素宽度被压缩为75px
flex布局对齐方式2.设置flex-wrap属性值：wrap
flex-wrap: wrap;
页⾯效果展⽰ - 装不下的⼦元素换到第⼆⾏

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。