<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ background-color: #eee; } *{ margin:0; padding: 0; list-style: none; } section{ width: 1000px; margin:10px auto; } ul{ background-color: #fff; border: 1px solid red; } li{ width: 150px; height: 150px; background-color: pink; margin:10px; } section:nth-child(1) ul{ /*设置伸缩布局*/ display:flex; } section:nth-child(1) ul li:nth-child(1){ /*比例*/ flex:1; } section:nth-child(1) ul li:nth-child(2){ flex:2; } section:nth-child(1) ul li:nth-child(3){ flex:1; } section:nth-child(2) ul{ /*设置伸缩布局*/ display:flex; } section:nth-child(2) ul li:nth-child(1){ /*比例*/ flex:1; } section:nth-child(2) ul li:nth-child(2){ /*flex:1;*/ } section:nth-child(2) ul li:nth-child(3){ flex:1; } </style> </head> <body> <section> <h4>伸缩比例</h4> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </section> <section> <h4>伸缩比例</h4> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </section> </body> </html>
