1, the preface

In the e-commerce system, some coupons will be pushed to users in order to attract new users, stimulate activation and repurchase, among which the coupon for new users is basically a tool available on every e-commerce platform.

The following is the coupon module of a community group purchase applet for the new person (the picture is taken from the applet, if there is a problem, please contact to delete it).

Initialize the style you see:Slide to the far right of the style:

As a technician, I guess the technical implementation of this module is as follows:

-1 coupon &2 coupon &3 coupon have different styles;

-4 or more slides are supported to slide left and right, and the margins of the first and last sheets should be kept.

Imagine a possible simplified version of the UI as follows:



Let’s look at how to achieve the effect of more than or equal to 4 coupons, which need to meet the following conditions:

  1. During initialization, the left margin should be reserved;
  2. In the sliding process, the left margin is not, the content can be directly top to the left;
  3. Slide to the last coupon, the most right margin should be reserved;

Let’s see how to implement this logic.

2, the Demo

2.1 The parent element has a fixed width

Let’s take a look at the following code operation effect:

<view class="contanier"> <view class="coupons"> <view class="coupons"> Coupons item</view> <view <view > <view class="coupons-item"> </view> <view class="coupons-item"> </view> <view class=" Coupons -item"> </view> </view> </view> .coupons { width: 654rpx; border: 1rpx solid red; margin: 0 auto; padding-left: 30rpx; /* box-sizing: border-box; margin-left: 0px; margin-left: 0px; margin-left: 0px; display: flex; flex-direction: row; align-items: center; overflow: auto } .coupons-item { width: 190rpx; height: 162rpx; color: #E50401; background: #fff; margin-right: 12rpx; /* Specify a flex shrink rule: if the flex shrink rule is required, it will shrink the item before it is actually displayed. }Copy the code

We can see that the Demo satisfies the conditions of 1&&2:

But condition 3 is not met: slide to the last coupon, the right-most margin should be reserved ~

Thinking: How to achieve nerds?

By reviewing the elements, we find that the margin-right of the last element is rendered but not applied, as shown below:

The width of the outer layer is set to the expected width of the container. The outer layer is set to the expected width of the container. Then the width of the inner box is the number of coupons *190[width of single item] + multiple margin values + padding space reserved, so that the right margin is just displayed.

.contanier { margin: 0 auto; width: 654rpx; overflow: auto; } .coupons { width: 856rpx; border: 1rpx solid red; margin: 0 auto; padding-left: 30rpx; /* box-sizing: border-box; margin-left: 0px; margin-left: 0px; margin-left: 0px; display: flex; flex-direction: row; align-items: center; overflow: auto } .coupons-item { width: 190rpx; height: 162rpx; color: #E50401; background: #fff; margin-right: 12rpx; /* Specify a flex shrink rule: if the flex shrink rule is required, it will shrink the item before it is actually displayed. }Copy the code

But under this method: when the number of coupons depends on the interface to return, this writing method is very inflexible and needs to constantly calculate the width of the actual sliding box, which is not recommended.

2.2 Max – content

Set overflow:auto; set width: max-Content;

.contanier { margin: 0 auto; margin-top: 100rpx; margin-bottom: 100rpx; overflow: auto; } .coupons { border: 1rpx solid red; padding-left: 30rpx; box-sizing: border-box; display: flex; flex-direction: row; align-items: center; overflow: auto; /* key ~ */ width: max-content; }Copy the code

At this point, you should see the last element’s margin-right in effect:

There is also a slight problem: the margin-right:12rpx for each element does not apply to the last element. It should match the padding-left:30rpx for the first element, so add more CSS like this:

.coupons-item:last-child {
  margin-right: 30rpx;
}
Copy the code

Finally, let’s see if the renderings meet the first three conditions:

  1. During initialization, the left margin should be reserved;



2. In the sliding process, the left margin is not available, and the content can be directly pushed to the left;



3. Slide to the last coupon, the most right margin should be reserved;

Width: max-content It can be implemented, but it is not clear what the meaning is, so it is specifically studied. The research results are as follows: ~

2.3 Introduction to the new Width value for CSS3

In CSS3, several new attribute values are added: max-content/min-content/fit-content, etc. Max-content is mainly introduced below.

If the container has enough width, enough space, then the width occupied is the size represented by max-Content.

Use the inner width of the larger element as the final container width ~ what things, every word I know, assembly together can not understand, first look at the Demo below

<view class="bg"> Use cSS3 new attribute :max-content</view> <view class="bg bg2"> Use CSS3 new attribute :max-content</view>. Bg {background: #E50401; margin-bottom: 10rpx; } .bg2 { width: max-content; }Copy the code

You’ll notice that the view is 100% of the parent element’s width by default, but with the max-Content attribute set it behaves like an inline element.



Here comes the CSS size: internal size & external size

– Internal size: is determined by the internal capacity of the element;

– External size: Set width/height for the element, which is fixed.

// View is a block-level element whose default width is 100% of the parent element's width.Copy the code

The value represented by max-content changes as the actual content of the element changes.

3, the last

In Flex, if the last element margin-right is invalid, try using max-content.