css3 - CSS布局flex問題
問題描述
http://jsfiddle.net/deathfang/6kSNV/1/
上面這種布局,可以用更簡潔的HTML實現不?
比如這種
<ul> <li style='background: red'>1</li> <li style='background: green'>2</li> <li style='background: yellow'>3</li> <li style='background: yellowgreen'>4</li> <li style='background: greenyellow'>5</li> <li style='background: pink'>6</li> <li style='background: blueviolet'>7</li> <li style='background: aliceblue'>8</li> <li style='background: orangered'>9</li></ul>
float方案上面也有,iOS7 safari測試右邊會有1px誤差,手機掃描下面二維碼可以看到
問題解答
回答1:當然可以, 既然你那么節約代碼, 那么就不用選擇使用ul了(還要去除默認樣式).實現的關鍵點在于:
父級flex-wrap高為wrap (默認是nowrap)子元素有border的話, 把box-sizing的值設為border-boxjsfiddle卡出翔了, 直接看代碼吧:
HTML:
<p class='flex-container'> <p class='flex-item flex-gold'>1</p> <p class='flex-item flex-red'>2</p> <p class='flex-item flex-pink'>3</p> <p class='flex-item flex-blue'>4</p> <p class='flex-item flex-yellowgreen'>5</p> <p class='flex-item flex-lightgreen'>6</p></p>
CSS:
.flex-container { display: flex; flex-flow: row wrap;}.flex-item { color: #fff; flex: 1 33.33333333%; height: 70px; line-height: 70px; text-align: center; border: solid 1px #efefef; box-sizing: border-box;}.flex-gold { background-color: gold;}.flex-red { background-color: red;}.flex-pink { background-color: pink;}.flex-blue { background-color: blue;}.flex-yellowgreen { background-color: yellowgreen;}.flex-lightgreen { background-color: lightgreen;}回答2:
其實可以的,使用浮動和負邊距來做。但是,還需要一個額外的層來控制寬度,這樣就可以做到控制顯示每行顯示多少個item。具體請見:http://www.cnblogs.com/my_front_research/archive/2013/01/09/2853274.html,本文中負邊距部分。
相關文章:
1. python bottle跑起來以后,定時執行的任務為什么每次都重復(多)執行一次?2. javascript - ios返回不執行js怎么解決?3. javascript - vue2如何獲取v-model變量名4. node.js - vue中 post數據遇到問題5. 前端 - 誰來解釋下這兩個 CSS selector 區別6. javascript - 求幫助 , ATOM不顯示界面!!!!7. html5 - HTML代碼中的文字亂碼是怎么回事?8. javascript - angular使從elastichearch中取出的文本高亮顯示,如圖所示9. mysql - 分庫分表、分區、讀寫分離 這些都是用在什么場景下 ,會帶來哪些效率或者其他方面的好處10. python - 爬蟲模擬登錄后,爬取csdn后臺文章列表遇到的問題
