Flex的最后一行

Sep 21, 2020

比如我们布置多个按钮, 前面的space-between, 但是最后一行靠左, 那么咋办呢?

方法一加个div

(这里是xml代码, html也是一样的.)

<view class="boxcheck" >
  <box class="box" wx:for="" wx:key="index"  mark="" lable="" bind:sign="check"  ></box>
  <view class=".lastview"></view>
</view>

这里是xss, css也是一样的

.boxcheck{
	display: flex;
	flex-wrap: wrap;
	padding: 20rpx;
	justify-content: space-between;
	background-color: var(--w);
}
.lastview{
	flex: auto;
	background-color: transparent;
	border: none;
}

方法二使用after

html不再需要div了. 更简洁

<view class="boxcheck" >
  <box class="box" wx:for="" wx:key="index"  mark="" lable="" bind:sign="check"  ></box>
</view>

css也更简洁了

.boxcheck{
	display: flex;
	flex-wrap: wrap;
	padding: 20rpx;
	justify-content: space-between;
	background-color: var(--w);
}

.boxcheck::after {
  content: " "; //这个是必须的. 某些时候空格也是必须的.
  flex: auto;  //很多时候auto不够, 尤其是做自动等宽分布的时候. 因为其他的的flex不是0而是1. 
}