flex制作筛子

1点 wrap是ul上面的属性

    <div class="box">
 <ul class="wrap">
            
                <li>1点</li>
                  </ul>
  </ul>
</div>
  ul>li {
        display: block;
        width: 100px;
        height: 100px;
        background: red;
        margin: 10px;
        color: wheat;
        font-size: 22px;
        border-radius: 50%;
    }

  .wrap {
        display: flex;
        flex-direction: fow;
        flex-wrap: wrap;
        /* nowrap不换行 */
        justify-content: space-around;
        align-items: center;

    }

在div里面填加一个li

<div>
                <li>1点</li>
                <li>2点 </li>
</div>

  <li>1点</li>
<li>2点 </li>
 <li>3点</li>

//左上角的圆点
  ul>li:nth-child(1) {
        align-self: flex-start;
        margin: 20px 0;


    }
//右下角的圆点
    ul>li:nth-child(3) {
        align-self: flex-end;
        margin: 0 0 20px 0;

    }