3 .实现思路，基本所有的方法都是用margin或者空白元素占据右边的空白，从而来让现有的元素和上面的表现一致

每一行列数是固定的(每一行列数是固定的，子项宽度和容器宽度是固定大的)

1 .用margin模拟space-between的空格:这感觉是一个最常见的操作，都能想到的，只是用来复习下选择器而已。

        .father{
            width: 800px;
            height:800px;
            background-color: cornsilk;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
        .father div{
            width: 150px;
            height:210px;
            background-color: yellowgreen;
            margin-bottom:10px;
        /* 每一行有5个元素 */
        .father div:not(:nth-child(5n)){
            /* nth-child(5n): 所有div都是5n,也就是最后一个元素*/
            /* not:取反向，不是5n，也就是每一行前面的4个 */
            /* 对这4个进行magin-right，最后一个不操作 */
            background-color: rgb(58, 50, 205);
            /* 把剩下所有的间距除4，因为有四个间隔,这里假设是10px */
            margin-right:10px;
   <div class="father">
       <div class="div">1</div>
       <div class="div">2</div>
       <div class="div">3</div>
       <div class="div">4</div>
       <div class="div">5</div>
       <div class="div">6</div>
       <div class="div">7</div>
       <div class="div">8</div>
2 .根据个数的最后一个元素动态margin.还是主要复习选择器技术
1 .这个要写很多css选择器来匹配
.father{
            width: 800px;
            height:800px;
            background-color: cornsilk;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            justify-content: space-between;
        .father div{
            width: 150px;
            height:210px;
            background-color: yellowgreen;
            margin-bottom:10px;
        .father div:last-child:nth-child(5n-1){
            /* 最后一行,有4个元素:同时匹配这俩元素 */
        .father div:last-child:nth-child(5n-2){
            /* 最后一行有3个元素 */
            margin-right: 325px;
        .father div:last-child:nth-child(5n-3){
            /* 最后一行有2个元素 */
        .father div:last-child:nth-child(5n-4){
            /* 最后一行有1个元素 */
            margin-right:200px;
<div class="div">1</div>
       <div class="div">2</div>
       <div class="div">3</div>
       <div class="div">4</div>
       <div class="div">5</div>
       <div class="div">6</div>
       <div class="div">7</div>
       <div class="div">8</div>
每一项宽度不固定
1 .方法1：最后一项margin-right:auto

2 .原理：margin:auto。用来计算元素对应方向应该获得的剩余空间大小

3 .填充规则
1 .如果一侧有值，另一侧是auto，那么auto取全部的剩余空间大小。前提是一侧必须有值.这里用的就是这一种
2 .如果两侧都是auto，那么会平分剩余空间大小
4 .实际代码
.container {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            width: 500px;
            max-width: 100%;
        .list {
            background-color: skyblue;
            margin: 10px;
        .list:last-child{
            margin-right:auto;
<div class="container">
    <canvas class="list" width="40" height="50"></canvas>
    <canvas class="list" width="60" height="30"></canvas>
    <canvas class="list" width="50" height="60"></canvas>
    <canvas class="list" width="70" height="30"></canvas>
    <canvas class="list" width="80" height="50"></canvas>
    <canvas class="list" width="70" height="70"></canvas>
    <canvas class="list" width="60" height="50"></canvas>
    <canvas class="list" width="40" height="50"></canvas>
    <canvas class="list" width="50" height="60"></canvas>
    <canvas class="list" width="70" height="30"></canvas>
    <canvas class="list" width="80" height="50"></canvas>
5 .方法2：创建伪元素并且设置flex:auto.
1 .就是新建一个元素，flex:1就是占据剩余全部空间.这种固定宽度的也是可用的
.container {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            width: 500px;
            max-width: 100%;
        .list {
            background-color: skyblue;
            margin: 10px;
        .container::after{
            content:"";
            flex:auto
 <div class="container">
    <canvas class="list" width="40" height="50"></canvas>
    <canvas class="list" width="60" height="30"></canvas>
    <canvas class="list" width="50" height="60"></canvas>
    <canvas class="list" width="70" height="30"></canvas>
    <canvas class="list" width="80" height="50"></canvas>
    <canvas class="list" width="70" height="70"></canvas>
    <canvas class="list" width="60" height="50"></canvas>
    <canvas class="list" width="40" height="50"></canvas>
    <canvas class="list" width="50" height="60"></canvas>
    <canvas class="list" width="70" height="30"></canvas>
    <canvas class="list" width="80" height="50"></canvas>
每一行列数不固定
1 .就是宽度会动态变化的时候。只有一种方式.用空白元素占位。只需要最大宽度个数的i空白元素即可，不需要高度，只需要宽度和margin加起来的值和正常元素一样即可

2 .这种方式是兼容前面的情况的

截屏2022-02-19 下午3.35.30.png
3 .此处用了5个i元素来补全，实际只用了3个补全，剩下的俩个在下一行一左一右还是按照space-between的方式排列了。最大数量的保证我们征程需要补全的量是足够的，多出的都会下一行显示，但是这里我们是看不到的，所以没有影响
.container {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            width: 500px;
            max-width: 100%;
        .list {
            background-color: skyblue;
            margin: 10px;
            width:50px;
            height:50px;
        .container>i{
            width:50px;
            margin:10px;
 <div class="container">
    <canvas class="list" ></canvas>
    <canvas class="list" ></canvas>
    <canvas class="list" ></canvas>
    <canvas class="list" ></canvas>
    <canvas class="list"></canvas>
    <canvas class="list" ></canvas>
    <canvas class="list"></canvas>
    <canvas class="list" ></canvas>
    <canvas class="list" ></canvas>
    <canvas class="list" ></canvas>
    <canvas class="list"></canvas>