❤️flex布局,justify-content,最后一行排列异常,解决方法

小明的学习圈子2023-08-13前端css flex

在CSS flex布局中,justify-content属性可以控制列表的水平对齐方式,例如space-between值可以实现两端对齐。但是,如果最后一行的列表的个数不满,则就会出现最后一行没有完全垂直对齐的问题。

问题描述:本案例是div里循环card看片,如果最后一行的列表的个数不满,则就会出现最后一行没有完全垂直对齐的问题。

image-20231011223804099

解决方法

1、父标签添加伪类(div),和card卡片一样的宽度和margin值 (card)

  .home-right-info::after {
    content:'';
    width:33%;
    border:1px solid transparent;
  }

image-20231011224006204

完整代码

<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 */
}
Last Updated 2024/4/6 10:47:15