css3 flex布局實現平均分配元素的示例代碼
發(fā)布時間:2020-07-21 16:20:33 作者:哈嘍哈66606
我要評論

這篇文章主要介紹了css3 flex布局實現平均分配元素的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
本文主要介紹了css3 flex布局實現平均分配元素,給自己留個筆記,也分享給大家,具體如下:
例子一:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex 布局</title> <style> *{ padding:0; margin:0; } body,html{ height: 100vh; min-width: 800px; } .container{ display:flex; flex-wrap:wrap; display: -webkit-flex; /* Safari */ } .container>.item{ border: 1px solid black; flex:1; height:100px; background: #abcdef; } </style> </head> <body> <div class="container"> <div class="item"></div> <main class="item"></main> <div class="item"></div> </div> </body> </html>
例子二:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex 布局</title> <style> *{ padding:0; margin:0; box-sizing: border-box; } body,html{ width: 100%; height: 100vh; min-width: 800px; display:flex; display: -webkit-flex; /* Safari */ justify-content: center; align-items: center; } .container{ width: 300px; height: 300px; display:flex; display: -webkit-flex; /* Safari */ flex-wrap: wrap; } .container>.item{ flex:0 0 33.3%; height:100px; background: #abcdef; border: 1px solid red; } main{ flex:0 0 33.3%; height:100px; background-color: #ccc; border: 1px solid red; } </style> </head> <body> <div class="container"> <div class="item">left</div> <main>main</main> <div class="item">right</div> <div class="item">left</div> <main>main</main> <div class="item">right</div> <div class="item">left</div> <main>main</main> <div class="item">right</div> </div> </body> </html>
flex:0 0 33.3% 相當于flex-basis:33.3%,使每一個元素的寬度占外層容器的33.3%,因此每行最多能夠排開三個元素。
flex-wrap:wrap 表示每行填滿時會自動換行。
例子三:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex 布局</title> <style> *{ padding:0; margin:0; box-sizing: border-box; } body,html{ width: 100%; height: 100vh; min-width: 800px; display:flex; display: -webkit-flex; /* Safari */ justify-content: center; align-items: center; } .container{ width: 300px; height: 300px; margin: 50px; display:flex; display: -webkit-flex; /* Safari */ flex-wrap: wrap; justify-content: space-between; } .container>.item{ flex:0 0 30%; height:90px; background: #abcdef; border: 1px solid red; } main{ flex:0 0 30%; height:90px; background-color: #ccc; border: 1px solid red; } </style> </head> <body> <div class="container"> <div class="item">left</div> <main>main</main> <div class="item">right</div> <div class="item">left</div> <main>main</main> <div class="item">right</div> <div class="item">left</div> <main>main</main> <div class="item">right</div> </div> </body> </html>
justify-content:space-between表示主軸方向的多余空間平均分配在兩兩item之間。
到此這篇關于css3 flex布局實現平均分配元素的示例代碼的文章就介紹到這了,更多相關flex平均分配元素內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持腳本之家!
相關文章
- 這篇文章主要介紹了使用Flex布局實現頭部固定內容區(qū)域滾動的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小2020-08-04
- 這篇文章主要介紹了詳解flex布局下圖片變形的解決方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學2020-08-04
詳解flex布局與position:absolute/fixed的沖突問題
這篇文章主要介紹了詳解flex布局與position:absolute/fixed的沖突問題,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面2020-08-03- 這篇文章主要介紹了Flex布局實現div內部子元素垂直居中的示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編2020-08-03
- 這篇文章主要介紹了Flex布局讓子項保持自身高度的實現,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學2020-08-03
- 這篇文章主要介紹了讓CSS flex布局最后一行列表左對齊的N種方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編2020-07-23
- 這篇文章主要介紹了flex布局實現上下固定中間滑動的布局方式,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來2020-07-21
- Flex 是 Flexible Box 的縮寫,意為"彈性布局",用來為盒狀模型提供最大的靈活性。這篇文章給大家介紹flex布局語法的相關知識,感興趣的朋友跟隨小編一起看看吧2020-08-26