flex布局设置space-between（around）最后⼀⾏不左对齐问
题
需求：在项⽬布局上使⽤弹性布局，要求每个盒⼦两端要对齐，⽽且最后⼀⾏在列不满的情况下要求左对齐；
遇到问题：
使⽤flex的设置justify-content为space-between；发现最后⼀⾏不能左对齐，⽽是两端对齐⽅式导致形成下图1，图2所⽰的问题
图1
图2
解决办法：俩种
⼀.添加⼏个空格⼦，格⼦⾼度为0
根据布局列数添加红格⼦(指上⾯的div)，每⾏最⼤n列，那么在最后添加n-2个空红格⼦即可，⽐如要求每⾏四列，也就是要求每⾏4个红格⼦
<title>flex弹性布局</title>
<style>
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.box {
width: 400px;
height: 100px;
background-color: red;
margin-bottom: 10px;
}
.item-empty {
height: 0px;
width: 400px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">3</div>
<div class="box">3</div>
<div class="box">3</div>
<div class="box">3</div>
<div class="box">3</div>
<div class="box">3</div>
<div class="box">3</div>
<div class="item-empty"></div>
<div class="item-empty"></div> </div>
</body>
</html>
⼆.伪元素after
1.当每⾏为3列时，见代码
<title>flex弹性布局</title>
<style>
.container {
display: flex;
justify-content: space-between;  flex-wrap: wrap;
}
.container:after{
content:'';
/*这个宽度和⼦元素宽度⼀致*/  width: 480px;
height: 0;
display: block;
}
.box {
width: 480px;
height: 100px;
background-color: red;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">3</div>
<div class="box">3</div>
<div class="box">3</div>
<div class="box">3</div>
<div class="box">3</div>
<div class="box">3</div>
<div class="box">3</div>
<div class="box">3</div>
</div>
</body>
flex布局对齐方式
</html>
2.当每⾏为4列时，见代码
<title>flex弹性布局</title>
<style>
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.
container:after {
content:' ';
flex:auto;
}
.box {
width: 400px;
height: 100px;
background-color: red;
margin-bottom: 10px;
}
.container .box{
margin-right:0.55rem;
width: -webkit-calc((100% - 0.55rem*4)/ 4);
width: calc((100% - 0.55rem*4)/ 4); 、
/*//这⾥⽤calc动态计算宽度，⽤于适配不同尺⼨的屏幕都是四列，值得注意的是，如果这⾥有padding，还需要减去padding的值，这⾥的宽度应该是除去padding和margin之后的*/
}
</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">3</div>
<div class="box">3</div>
<div class="box">3</div>
<div class="box">3</div>
<div class="box">3</div>
<div class="box">3</div>
<div class="box">3</div>
<div class="box">3</div>
</div>
</body>
</html>
3.不确定列数，见下
<template>
<div class="tem-flex">
<div class="tem-list" v-for="item in len">弹性布局</div>
<div class="list" v-for="item in (rowNum-len%rowNum)" v-if="len%rowNum > 0"></div>  </div>
</template>
<script>
export default {
data() {
return {
len : 14,
rowNum: 4  // rowNum即是每列元素的个数，4列，5列。。。更改这个值即可
}
},
}
</script>
<style scoped>
.tem-flex {
display: flex;
flex-wrap: wrap;
justify-content:space-between;
justify-items: center;
text-align: justify;
}
.list {
content: '';
width: 20%;
border:1px solid transparent;
padding: 5px;
overflow: hidden;
}
.tem-list {
width:20%;
border:1px solid #ff6600;
margin-bottom: 10px;
padding: 10px 5px;
display: flex;
justify-content: center;
}
</style>

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