| <!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; | |
| height: 250px; | |
| } | |
| li{ | |
| width: 150px; | |
| height: 150px; | |
| background-color: pink; | |
| margin:10px; | |
| } | |
| section:nth-child(1) ul{ | |
| /*設置伸縮布局*/ | |
| display:flex; | |
| /* 主軸對齊方式：從主軸開始的地方對齊*/ | |
| justify-content: flex-start; | |
| } | |
| section:nth-child(2) ul{ | |
| /*設置伸縮布局*/ | |
| display:flex; | |
| /* 主軸對齊方式：從主軸結束的地方對齊*/ | |
| justify-content: flex-end; | |
| } | |
| section:nth-child(3) ul{ | |
| /*設置伸縮布局*/ | |
| display:flex; | |
| /* 主軸對齊方式：在主軸方向居中*/ | |
| justify-content: center; | |
| } | |
| section:nth-child(4) ul{ | |
| /*設置伸縮布局*/ | |
| display:flex; | |
| /* 主軸對齊方式：在主軸方向上平分空間*/ | |
| justify-content: space-around; | |
| } | |
| section:nth-child(5) ul{ | |
| /*設置伸縮布局*/ | |
| display:flex; | |
| /* 主軸對齊方式：在主軸方向上方兩端對齊*/ | |
| justify-content: space-between; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <section> | |
| <h4>主軸對齊方式：flex-start</h4> | |
| <ul> | |
| <li>1</li> | |
| <li>2</li> | |
| <li>3</li> | |
| </ul> | |
| </section> | |
| <section> | |
| <h4>主軸對齊方式：flex-end</h4> | |
| <ul> | |
| <li>1</li> | |
| <li>2</li> | |
| <li>3</li> | |
| </ul> | |
| </section> | |
| <section> | |
| <h4>主軸對齊方式：center</h4> | |
| <ul> | |
| <li>1</li> | |
| <li>2</li> | |
| <li>3</li> | |
| </ul> | |
| </section> | |
| <section> | |
| <h4>主軸對齊方式：space-around</h4> | |
| <ul> | |
| <li>1</li> | |
| <li>2</li> | |
| <li>3</li> | |
| </ul> | |
| </section> | |
| <section> | |
| <h4>主軸對齊方式：space-between</h4> | |
| <ul> | |
| <li>1</li> | |
| <li>2</li> | |
| <li>3</li> | |
| <li>4</li> | |
| </ul> | |
| </section> | |
| </body> | |
| </html> |
新聞熱點
疑難解答
