❤️flex布局，justify-content，最后一行排列异常，解决方法
在CSS flex布局中，justify-content属性可以控制列表的水平对齐方式，例如space-between值可以实现两端对齐。但是，如果最后一行的列表的个数不满，则就会出现最后一行没有完全垂直对齐的问题。
问题描述：本案例是div里循环card看片，如果最后一行的列表的个数不满，则就会出现最后一行没有完全垂直对齐的问题。
解决方法
1、父标签添加伪类（div），和card卡片一样的宽度和margin值 （card）
.home-right-info::after {
content:'';
width:33%;
border:1px solid transparent;
}
完整代码
<div class="home-right-info">
<a-card
v-for="(item,index) in channelData"
:key="item.name"
:body-style="{ display: 'flex' }"
class="left-card"
>
<a-form :form="form" layout="inline">
<a-row class="card-top">
<a-form-item has-feedback class="font-top">{{index+1}}</a-form-item>
<a-form-item has-feedback class="font-top">{{item.channelNnme}}</a-form-item>
<a-form-item has-feedback class="font-top">{{item.channelIp}}</a-form-item>
</a-row>
<a-row>
<a-form-item has-feedback label="识别车号" name="plantNo">
<a-input class="input-one" v-model="item.plantNo"/>
</a-form-item>
<a-form-item has-feedback>
<a-select style="width:52px;">
<a-select-option value="辽">辽</a-select-option>
<a-select-option value="京">京</a-select-option>
</a-select>
</a-form-item>
<a-form-item has-feedback>
<a-input class="input-one"/>
</a-form-item>
</a-row>
<a-row>
<a-form-item has-feedback label="卡类型" name="cardType">
<a-input class="input-two" v-model="item.cardType"/>
</a-form-item>
<a-form-item has-feedback label="卡号" name="cardNo">
<a-input class="input-two" v-model="item.cardNo"/>
</a-form-item>
</a-row>
<a-row>
<a-form-item has-feedback label="持卡人" name="userName">
<a-input class="input-two" v-model="item.userName"/>
</a-form-item>
<a-form-item has-feedback label="时间" name="channelTime">
<a-input class="input-two" v-model="item.channelTime"/>
</a-form-item>
</a-row>
<a-row>
<a-form-item has-feedback label="设备" name="channelNnme">
<a-textarea class="input-three" v-model="item.channelNnme"/>
</a-form-item>
<a-form-item has-feedback label="部门" name="sysCompanyName">
<a-textarea class="input-three" v-model="item.sysCompanyName"/>
</a-form-item>
</a-row>
<a-row class="card-row-left">
<a-form-item has-feedback label="是否手工抬杆" name="autoModeName">
<a-checkbox v-model="item.autoModeName"></a-checkbox>
</a-form-item>
<a-form-item has-feedback label>
<a-button size="small" style="margin-left: 5px">权限</a-button>
</a-form-item>
<a-form-item has-feedback>
<a-button size="small" style="margin-left: 5px">抬杆</a-button>
</a-form-item>
<a-form-item has-feedback>
<a-button size="small" style="margin-left: 5px">落杆</a-button>
</a-form-item>
<a-form-item has-feedback label>
<a-button size="small" @click="handleDetail(item)" style="margin-left: 5px">详情</a-button>
</a-form-item>
</a-row>
<a-row class="card-row-left">
<a-form-item has-feedback label="LED显示" name="ledContent">
<a-textarea
showCount
:maxlength="300"
class="card-textarea"
v-model="item.ledContent"
/>
</a-form-item>
</a-row>
</a-form>
</a-card>
</div>
<style lang="less" scoped>
@import '~@assets/less/common.less';
.main {
.user-content {
margin-bottom: 20px;
border-bottom: 1px solid#ccc;
display: flex;
height: 40px;
align-items: center; //垂直居中
justify-content: center;
.user-info {
.user-name {
font-size: 32px;
}
}
}
.home-right-info {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.left-card {
width: 33%;
margin-bottom: 20px;
text-align: right;
border-right: 5px solid #f0f2f5;
.card-top {
text-align: left;
.font-top {
font-size: 20px;
font-weight: bold;
}
}
.input-one {
width: 119px;
}
.input-two {
width: 132px;
}
.input-three {
width: 132px;
height: 60px;
resize: none;
white-space: pre-wrap;
word-break: break-all;
word-wrap: break-word;
text-align: left;
}
.card-button-top {
text-align: left;
}
.card-row-left {
text-align: left;
.card-textarea {
width: 320px;
height: 80px;
resize: none;
}
}
}
}
.home-right-info::after {
content:'';
width:33%;
border:1px solid transparent;
}
}
</style>
2、每一行列数是固定
2.1、不使用justify-content:space-between声明在模拟两端对齐效果
<div class="container">
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
</div>
css样式
.container {
display: flex;
flex-wrap: wrap;
}
.list {
width: 24%; height: 100px;
background-color: skyblue;
margin-top: 15px;
}
.list:not(:nth-child(4n)) {
margin-right: calc(4% / 3);
}
2.2、根据个数最后一个元素动态margin
由于每一列的数目都是固定的，因此，我们可以计算出不同个数列表应当多大的margin值才能保证完全左对齐。
例如，假设每行4个元素，结果最后一行只有3个元素，则最后一个元素的margin-right大小是“列表宽度+间隙大小”的话，那最后3个元素也是可以完美左对齐的
- list:last-child:nth-child(4n - 1)说明最后一行，要么3个元素，要么7个元素……
- list:last-child:nth-child(4n - 2)说明最后一行，要么2个元素，要么6个元素……
在本例中，一行就4个元素，因此，我们可以有如下CSS设置：
.container {
display: flex;
/* 两端对齐 */
justify-content: space-between;
flex-wrap: wrap;
}
.list {
width: 24%; height: 100px;
background-color: skyblue;
margin-top: 15px;
}
/* 如果最后一行是3个元素 */
.list:last-child:nth-child(4n - 1) {
margin-right: calc(24% + 4% / 3);
}
3、每一子项宽度不固定
3.1、最后一项margin-right:auto
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.list {
background-color: skyblue;
margin: 10px;
}
/* 最后一项margin-right:auto */
.list:last-child {
margin-right: auto;
}
3.2、创建伪元素并设置flex:auto或flex:1
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.list {
background-color: skyblue;
margin: 10px;
}
/* 使用伪元素辅助左对齐 */
.container::after {
content: '';
flex: auto; /* 或者flex: 1 */
}