婷婷久久综合九色综合,欧美成色婷婷在线观看视频,偷窥视频一区,欧美日本一道道一区二区

<tt id="bu9ss"></tt>
  • <span id="bu9ss"></span>
  • <pre id="bu9ss"><tt id="bu9ss"></tt></pre>
    <label id="bu9ss"></label>

    當前位置:首頁 >  站長 >  編程技術 >  正文

    flex布局解決最后一排數(shù)量不夠自動向兩端排列問題

     2020-11-05 14:11  來源: 田珊珊個人博客   我來投稿 撤稿糾錯

      阿里云優(yōu)惠券 先領券再下單

    flex布局,當最后一行數(shù)量不夠時,會出現(xiàn)下面布局

    QQ截圖20201105141143

    那么要實現(xiàn)下面如下效果怎么操作呢:

    QQ截圖20201105141151

    方法一:僅適用于三列布局

    列表
    .item-flex{    display: flex;    flex-wrap: wrap;    justify-content:space-between;    text-align: justify;  }    .item-flex:after{    content: '';    width: 30%;  }  .item-list{    width:30%;  }

    方法二:適用于四列、五列…更多情況

    列表
     
    .item-flex{  display: flex;  flex-wrap: wrap;  justify-content:space-between;  justify-items: center;  text-align: justify;}.list{  content: '';  width: 240px;  border:1px solid transparent;  padding: 5px;  overflow: hidden;}.item-list{  width:240px;  border:1px solid #ff6600;  margin-bottom: 10px;  padding: 10px 5px;  display: flex;  justify-content: center;}
    這里的 row 即是每列元素的個數(shù),4列,5列。。。更改這個值即可

    文章來源:田珊珊個人博客

    來源地址:http://www.tianshan277.com/832.html

    申請創(chuàng)業(yè)報道,分享創(chuàng)業(yè)好點子。點擊此處,共同探討創(chuàng)業(yè)新機遇!

    相關文章

    熱門排行

    信息推薦