<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; list-style: none; } body { background-color: #999999; } section { width: 800px; margin: 30px auto; } ul { background-color: white; border: 1px solid #000; overflow: hidden; } li { width: 150px; height: 150px; background-color: pink; margin: 10px; } section:nth-child(1) ul li { float: left; } section:nth-child(2) ul { display: flex; justify-content: flex-end; flex-wrap: wrap; } </style></head><body><section> <h3>正常布局</h3> <ul> <li>1</li> <li>2</li> <li>3</li> </ul></section><section> <h3>伸縮布局,justify-content: flex-end;行內結束位置對齊</h3> <ul> <li>1</li> <li>2</li> <li>3</li> <li>1</li> <li>2</li> <li>3</li> <li>1</li> <li>2</li> <li>3 <li>1</li> <li>2</li> <li>3</li> <li>1</li> <li>2</li> <li>3</li> <li>1</li> <li>2</li> <li>3</li> <li>1</li> <li>2</li> <li>3</li> <li>1</li> <li>2</li> <li>3</li> </ul></section></body></html>
新聞熱點
疑難解答
