當(dāng)前位置:首頁(yè) >  站長(zhǎng) >  編程技術(shù) >  正文

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

 2020-11-05 14:11  來(lái)源: 田珊珊個(gè)人博客   我來(lái)投稿 撤稿糾錯(cuò)

  域名預(yù)訂/競(jìng)價(jià),好“米”不錯(cuò)過(guò)

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

QQ截圖20201105141143

那么要實(shí)現(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 即是每列元素的個(gè)數(shù),4列,5列。。。更改這個(gè)值即可

文章來(lái)源:田珊珊個(gè)人博客

來(lái)源地址:http://www.tianshan277.com/832.html

申請(qǐng)創(chuàng)業(yè)報(bào)道,分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處,共同探討創(chuàng)業(yè)新機(jī)遇!

相關(guān)文章

熱門(mén)排行

信息推薦