css flex布局多列,两端对齐,justify-content: space-between;换行往左靠拢有效解决办法
2021/7/21 23:36:22
本文主要是介绍css flex布局多列,两端对齐,justify-content: space-between;换行往左靠拢有效解决办法,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
<ul class="list"> <li> <a class="link" href="#"> <img src="./images/1.jpg"> <div class="msk"></div> <div class="bottom"> <span class="icon-headset"></span><i>95万</i><span class="icon-play"></span> </div> <p>百万评论热歌全集丨时实更新中</p> </a> </li> <li> <a class="link" href="#"> <img src="./images/2.jpg"> <div class="msk"></div> <div class="bottom"> <span class="icon-headset"></span><i>42万</i><span class="icon-play"></span> </div> <p>网易云音乐流行热歌精选</p> </a> </li> <li> <a class="link" href="#"> <img src="./images/3.jpg"> <div class="msk"></div> <div class="bottom"> <span class="icon-headset"></span><i>73万</i><span class="icon-play"></span> </div> <p>“其实我也很难过,你为什么不回头看看我”</p> </a> </li> <li> <a class="link" href="#"> <img src="./images/4.jpg"> <div class="msk"></div> <div class="bottom"> <span class="icon-headset"></span><i>92876</i><span class="icon-play"></span> </div> <p>【袁娅维】我是一只鱼&我要我们在一起 Acoustic</p> </a> </li> <li> <a class="link" href="#"> <img src="./images/5.jpg"> <div class="msk"></div> <div class="bottom"> <span class="icon-headset"></span><i>19万</i><span class="icon-play"></span> </div> <p>在一起叫梦分开了叫痛没做完的梦最痛</p> </a> </li> <li> <a class="link" href="#"> <img src="./images/6.jpg"> <div class="msk"></div> <div class="bottom"> <span class="icon-headset"></span><i>1694</i><span class="icon-play"></span> </div> <p>金毛托运中死亡,陈乔恩为其发声</p> </a> </li> <li> <a class="link" href="#"> <img src="./images/7.jpg"> <div class="msk"></div> <div class="bottom"> <span class="icon-headset"></span><i>222万</i><span class="icon-play"></span> </div> <p>我字字皆你,你却句句非我</p> </a> </li> <li> <a class="link" href="#"> <img src="./images/8.jpg"> <div class="msk"></div> <div class="bottom"> <span class="icon-headset"></span><i>42万</i><span class="icon-play"></span> </div> <p>E38. 杂谈 | “困”在互联网大厂的实习生们?</p> </a> </li> <li></li> <li></li> </ul>.list { display: flex; flex-flow: row wrap; justify-content: space-between; width: 689px; margin: 20px auto 0; }
.list li { width: 140px; max-height: 204px; padding-bottom: 30px; }
只需要在后面多加(每一列n个 n-2个)子元素,不设置高度或者后面加的子元素不设置高度,不然会出现空白
这篇关于css flex布局多列,两端对齐,justify-content: space-between;换行往左靠拢有效解决办法的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-06css样式背景图怎么分开(css背景图片样式)-icode9专业技术文章分享
- 2024-03-06css线性样式(css中划线样式)-icode9专业技术文章分享
- 2024-03-06jq点击添加css样式(jq设置css样式)-icode9专业技术文章分享
- 2024-03-06流程样式css(css实现流程图)-icode9专业技术文章分享
- 2024-03-06css怎么调搜索键样式(css搜索框怎么调大小)-icode9专业技术文章分享
- 2024-03-06css层叠样式(Css层叠样式介绍)-icode9专业技术文章分享
- 2024-03-06css样式表有何特点(css样式表的使用方法有几种)-icode9专业技术文章分享
- 2024-03-06css的列表样式(css列表样式属性包括)-icode9专业技术文章分享
- 2024-03-06css3手机端样式(手机端css怎么写)-icode9专业技术文章分享
- 2024-02-21蝉知CSS样式修改(改变css样式)-icode9专业技术文章分享