flex佈局在移動端會用得比較普遍,例如導航欄,菜單欄等,以支付寶,淘寶APP爲例。css
看了網上不少關於flex佈局,有些寫得太亂了,也太複雜了。html
<!DOCTYPE html> <html> <head> <title>Flex佈局</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover"> <style type="text/css"> *{margin:0px;padding: 0px;list-style: none;} .con{ height: 50px; text-align: center; background: #f00; } .con li{ width: 20%; border:1px solid #000; box-sizing: border-box; height: 50px; float: left; line-height: 50px; } </style> </head> <body> <ul class="con"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body> </html>
就沒每一個<li></li>按照20%平均分,左浮動便可。這種方法是能夠實現得,但後面再增長<li></li>,例如7個<li></li>,那麼是下面這樣的。web
很明顯父級元素放不下了,只能被擠下去了。微信
<!DOCTYPE html> <html> <head> <title>Flex佈局</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover"> <style type="text/css"> *{margin:0px;padding: 0px;list-style: none;} .con{ display: flex; height: 50px; text-align: center; background: #f00; } .con li{ flex: 1; text-align: center; line-height: 50px; border:1px solid #000; box-sizing: border-box; } </style> </head> <body> <ul class="con"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body> </html>
效果是和上面同樣的佈局
可是當我新增7-10個,都不會被擠下去,而是直接在父級元素上面進行排列並從新劃分寬度。學習
若是要加一個margin-right呢?這個也容易啊,可是最後一個<li></li>不貼邊,咱們要給最後一個<li></li>單獨加一個style。flex
<!DOCTYPE html> <html> <head> <title>Flex佈局</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover"> <style type="text/css"> *{margin:0px;padding: 0px;list-style: none;} .con{ display: flex; height: 50px; text-align: center; } .con li{ flex: 1; text-align: center; line-height: 50px; border:1px solid #000; box-sizing: border-box; margin-right: 3px; background: #f00; } </style> </head> <body> <ul class="con"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li style="margin-right: 0;">9</li> </ul> </body> </html>
如上圖,有三個<li></li>,每一個<li></li>都是不均等的,在父級元素用普通的方法就是給不一樣的百分比。那麼用flex佈局,就是這樣:spa
<!DOCTYPE html> <html> <head> <title>Flex佈局</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover"> <style type="text/css"> *{margin:0px;padding: 0px;list-style: none;} .con{ display: flex; height: 50px; text-align: center; } .con .li_1{ flex: 1; text-align: center; line-height: 50px; border:1px solid #000; box-sizing: border-box; background: #f00; } .con .li_2{ flex: 2; text-align: center; line-height: 50px; border:1px solid #000; box-sizing: border-box; background: #f00; } .con .li_3{ flex: 3; text-align: center; line-height: 50px; border:1px solid #000; box-sizing: border-box; background: #f00; } </style> </head> <body> <ul class="con"> <li class="li_1">1</li> <li class="li_2">2</li> <li class="li_3">3</li> </ul> </body> </html>
上面給每一個<li></li>用flex劃分,一共分6份,li_1佔1/6,那就是flex:1;li_2佔2/6,那就是flex:2;這個容易理解吧。scala
在父級元素使用justify-content3d
justify-content:space-around;/*左右平均分佈*/ justify-content:center;/*居中*/ justify-content:space-between;/*兩端分佈*/ justify-content:flex-start;/*居左*/ justify-content:flex-end;/*居右*/
Author:TANKING
學習交流微信:face6009
web:http://likeyunba.com