flex 設置換行flex-wrap


/* 分類導航欄 */
.bannerSort{

}
.bannerSort ul{
	width: 100%;
	list-style: none;
	display: flex;
	flex-wrap:wrap;
}
/* 這種是通過浮動加百分比換行 */
/* .bannerSort ul li{
	float:left;
	width: 25%;
	text-align: center;
}
.bannerSort ul li img{
	width: 70%;
	vertical-align: bottom;
}  */
/* 這種是通過flex-wrap,注意一定要寫width、max-minwidth才會有效果 */
.bannerSort ul li{
	width: 25%;
	max-width: 25%;
	min-width: 25%;
	text-align: center;
}
.bannerSort ul li img{
	width: 70%;
	vertical-align: bottom;
}

 flex-wrap如果其子元素不加max-width、min-width單單加width是不會生效的就會像下圖那樣不生效

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2026 CODEPRJ.COM