<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>flex的比例和排序</title> <style type="text/css"> *{margin: 0;padding: 0;} .hd{width: 1200px; height: 500px; border: 2px solid cornflowerblue; margin: 40px auto; display: flex;} .hd>p{ width: 190px; height: 100px; border: 1px solid fuchsia; flex: 1; /*flex 规定在flex盒子中所占用的比例*/ } .hd>p:nth-child(3){ flex: 2;/*定义相对于原来的宽度*/ } </style> </head> <body> <!--order 排序--> <p class="hd"> <p>1</p> <p style="order: 5;">2</p> <p>3</p> <p>4</p> <p>5</p> </p> </body> </html>
如对本文有疑问, 点击进行留言回复!!
荐 微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示
深入理解CSS background-blend-mode的作用机制
网友评论