flex布局控制展示几行

需求： 1、配置4-5个盒子，默认展示两行，第一行展示3个，剩余折行展示。 2、配置小于4个盒子，展示一行，平均分布。

后台返回数据

// 假数据
const assetList = [
    { alias: 'a', score:0 },
    { alias: 'a', score:0 },
    { alias: 'a', score:0 },
    { alias: 'a', score:0 },
  ]

盒子布局

// 盒子布局
<Div className="equal-division" couponLength={assetList.length}>
  {assetList.map((item: { score: string; alias:string      }, index: number) => (
   <div className={assetList.length <= 4 ?'coupon_points' : 'coupon_points_V4'}
         key={Math.random()}
         onClick={() => handlerCoupon(item, index)}
   >
    <div className="space-y-14">
      <div className="font_4 text_5">{item.score}</div>
      <div className="font_5">{item.alias}</div>
    </div>
  </div>
 )
)}
</Div>

样式

import styled from 'styled-components
父元素
const Div = styled.div<{
  couponLength: number 传入数组长度进行判断
}>`
  display: flex;  flex布局
  flex-wrap: wrap; 换行
  position: relative;
  flex: 1; 
  justify-content: ${(p) =>
    p.couponLength <= 4 ? ' space-around' : 'flex-start'}; 根据长度判断如何显示
   //子元素
  .coupon_points,
  .coupon_points_V4 {
    // 使用计算属性calc(1 / ${p.couponLength})
    flex: ${(p) => (p.couponLength <= 4 ? `calc(1 / ${p.couponLength})` : '')};
    width: ${(p) => (p.couponLength > 4 ? '117px' : '')};
    display: flex;
    justify-content: center;
    align-items: center;
    .space-y-14 {
      .font_4 {
        font-size: 17px;
        color: #333333;
        text-align: center;
        line-height: 25px;
        height: 25px;
        font-weight: 500;
        margin-bottom: 4px;
      }
      .font_5 {
        font-size: 12px;
        color: #999999;
        text-align: center;
        line-height: 16px;
        height: 16px;
        font-weight: 400;
      }
    }
  }
  .coupon_points {
    &:not(:last-child) {
      &::after {
        content: '';
        display: block;
        position: absolute;
        right: 0;
        top: 18px;
        width: 0.5px;
        height: 36px;
        background-color: #e8e8e8;
      }
    }
  }
  .coupon_points_V4 {
    &:nth-child(1) {
      margin-bottom: 1px;
    }
    &:not(:nth-child(3n)) {
      &::after {
        content: '';
        display: block;
        position: absolute;
        right: 0;
        top: 18px;
        width: 0.5px;
        height: 36px;
        background-color: #e8e8e8;
      }
    }
  }
`
export { Div }