flex space-between 均分换行,不够一行的时候从左侧开始

    *{
                margin: 0;
                padding: 0;
                list-style: none;
            }
            .flex-wrap{
                width: 600px;
                display: flex;
                border: 15px solid #0077AA;
                justify-content: space-between;
                flex-wrap: wrap;
                background-color: lightgreen;
                box-sizing: border-box;
            }
            .flex-wrap:after{
              content: "";
              width: 180px;
              height: 0;
              visibility: hidden;
            }
            .flex-item {
             display: flex;
              flex-direction: column;
              width: 180px;
              height: 180px;
              margin-bottom: 30px;
              background-color: lightcoral;
              overflow: hidden;
              padding-top: 30px;
              text-align: center;
              box-sizing: border-box;
              border-radius: 25px;
              border: 1px solid #eee;
            }
<div class="flex-wrap">
            <div class="flex-item">1</div>
            <div class="flex-item">2</div>
            <div class="flex-item">3</div>
            <div class="flex-item">4</div>
            <div class="flex-item">5</div>
        </div>

 

posted @ 2022-06-16 13:54  伊优  阅读(714)  评论(0编辑  收藏  举报