是不是为flex最后一行无法左对齐而苦恼。那就看看我下面的代码吧~

html代码部分:

<div class="left-list" @click="show" v-if="showdt">
          <div class="left-list-dingwei">
            <div class="hidden_top_flex">
              <div class="hidden_top_flex_list">
                <div class="hidden_top_flex_cell img1">
                  <div class="flexbox"><img src="../icon/icon.png" alt=""></div>
                  <div> <span style="color: #002ee5;">{{num + 1}}</span>/{{allnum}}</div>
                </div>
                <div class="hidden_top_flex_cell img2">
                  <div class="flexbox"><img src="../icon/icon1.png" alt=""></div>
                  <div>0</div>
                </div>
                <div class="hidden_top_flex_cell img3">
                   <div class="flexbox"><img src="../icon/icon3.png" alt=""></div>
                   <div>0</div>
                </div>
              </div>
              <div class="hidden_top_flex_list img1">
                <div style="display: flex;"><img src="../icon/icon2.png" alt=""></div>
                <div>交卷</div>
              </div>
            </div>
            <ul ref="element">
            	<li class="becg" v-for="(item,i) in examdata" v-on:click="addClass(i)" v-bind:class="{'stlo':btr[i]||false,'stlt':bfa[i]||false}" v-if="i+1 < 10 ">
            		0{{i+1}}
            	</li>
              <li class="becg" v-on:click="addClass(i)" v-bind:class="{'stlo':btr[i]||false,'stlt':bfa[i]||false}" v-else>
                {{ i + 1 }}
              </li>
            </ul>
          </div>
        </div>

CSS样式部分

	.left-list ul {
		padding: 0.3rem 0px;
    padding-right: calc(((100vw - (13.8rem + 60px + 12px))*0.5) - 17px);
    padding-left: calc(((100vw - (13.8rem + 60px + 12px))*0.5) + 0px);
    display: flex;
    flex-wrap: wrap;
   /* position: fixed;
    bottom: 0px; */
    background-color: white;
    max-height: calc(100% - 3rem);
    overflow-y:scroll;
    justify-content: space-between;
	}
  .left-list ul li:last-child{
    margin-right: auto;
  }

最主要是选择器:last-child 的 margin-right: auto;
如果有大佬有其他问题可以留言。喜欢的可以点赞,大家互相交流~

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值