css3的flex彈性佈局實現貼邊均勻等分列表
本章節介紹一下如何使用彈性佈局實現此功能,雖然當前有一定的瀏覽器相容問題,但是實現比較簡單。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> * { margin:0px; padding:0px; } .container { height:220px; overflow:hidden; } .container ul{ margin:0px auto; background:#DEF3FF; width:625px; list-style:none; display:flex; justify-content:space-between; flex-wrap:wrap; } .container li{ width:100px; height:100px; margin-bottom:20px; background:#ccc; } </style> </head> <body> <div class="container"> <ul> <li class="pull-left"></li> <li class="pull-left"></li> <li class="pull-left"></li> <li class="pull-left"></li> </ul> <ul> <li class="pull-left"></li> <li class="pull-left"></li> <li class="pull-left"></li> <li class="pull-left"></li> </ul> </div> </body> </html>
上面的程式碼實現了我們的要求,要比普通方式要簡單一些。
更多關於Flex彈性佈局更多內容可以參閱display:flex彈性佈局一章節。
相關文章
- flex產品列表均勻分佈程式碼例項Flex
- Flex-彈性佈局Flex
- display:flex 彈性佈局Flex
- flex 彈性佈局的基本操作Flex
- flex彈性佈局 響應式佈局Flex
- 彈性盒模型,flex佈局模型Flex
- flex彈性佈局 垂直居中Flex
- CSS:彈性佈局(display:flex)CSSFlex
- css之彈性佈局(flex)CSSFlex
- CSS3 Flex 彈性佈局例項程式碼詳解CSSS3Flex
- flex彈性佈局程式碼例項Flex
- css3 flex 佈局CSSS3Flex
- 前端面試3:flex彈性盒佈局前端面試Flex
- Flex彈性佈局(附超Q小demo)Flex
- 一文搞懂flex(彈性盒佈局)Flex
- CSS3之flex佈局CSSS3Flex
- 淺談CSS3中display屬性的Flex佈局CSSS3Flex
- css--flex彈性佈局詳解和使用CSSFlex
- CSS3實現瀑布流佈局(display: flex/column-coCSSS3Flex
- 淺談CSS3中display屬性的Flex佈局(轉)CSSS3Flex
- 佈局之: flex(CSS3新增)FlexCSSS3
- flex佈局屬性Flex
- 學習筆記(十一):ArkUi-彈性佈局 (Flex)筆記UIFlex
- 聖盃佈局進階版-flex佈局實現Flex
- css3系列之彈性盒子 flexCSSS3Flex
- 彈性佈局(伸縮佈局)
- css實現盒尺寸重置、均勻分佈的子元素、截斷文字CSS
- flex佈局實戰Flex
- CSS Flex 佈局的 flex-direction 屬性講解CSSFlex
- 使用flex實現三欄佈局,兩邊固定,中間自適應Flex
- 用Flex實現常見的幾種佈局Flex
- 【基礎知識】Flex-彈性佈局原來如此簡單!!Flex
- html頁面實現聖盃佈局flexHTMLFlex
- CSS佈局–聖盃佈局和雙飛翼佈局以及使用Flex實現聖盃佈局CSSFlex
- flex 佈局Flex
- Flex佈局Flex
- 淺談Flex佈局的屬性及使用Flex
- flex佈局父項常見屬性flex-flowFlex
- dispaly的Grid佈局與Flex佈局Flex