| <!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: 300px; | |
| } | |
| li{ | |
| width: 150px; | |
| height: 150px; | |
| background-color: pink; | |
| margin:10px; | |
| } | |
| section:nth-child(1) ul{ | |
| /*設(shè)置伸縮布局*/ | |
| display:flex; | |
| /*側(cè)軸對齊方式:從側(cè)軸開始的地方對齊*/ | |
| align-items: flex-start; | |
| } | |
| section:nth-child(2) ul{ | |
| /*設(shè)置伸縮布局*/ | |
| display:flex; | |
| /*側(cè)軸對齊方式:從側(cè)軸開始的地方對齊*/ | |
| align-items: flex-end; | |
| } | |
| section:nth-child(3) ul{ | |
| /*設(shè)置伸縮布局*/ | |
| display:flex; | |
| /*側(cè)軸對齊方式:從側(cè)軸開始的地方對齊*/ | |
| align-items: center; | |
| /* 主軸 水平*/ | |
| justify-content: center; | |
| } | |
| section:nth-child(4) ul{ | |
| /*設(shè)置伸縮布局*/ | |
| display:flex; | |
| /*側(cè)軸對齊方式:從側(cè)軸開始的地方對齊*/ | |
| align-items: stretch; | |
| } | |
| section:nth-child(4) ul li{ | |
| height: auto; | |
| } | |
| section:nth-child(5) ul{ | |
| /*設(shè)置伸縮布局*/ | |
| display:flex; | |
| /*主軸兩端對齊*/ | |
| justify-content: space-between; | |
| /*側(cè)軸居中*/ | |
| align-items: center; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <section> | |
| <h4>側(cè)軸對齊方式：flex-start</h4> | |
| <ul> | |
| <li>1</li> | |
| <li>2</li> | |
| <li>3</li> | |
| </ul> | |
| </section> | |
| <section> | |
| <h4>側(cè)軸對齊方式：flex-end</h4> | |
| <ul> | |
| <li>1</li> | |
| <li>2</li> | |
| <li>3</li> | |
| </ul> | |
| </section> | |
| <section> | |
| <h4>側(cè)軸對齊方式：center</h4> | |
| <ul> | |
| <li>1</li> | |
| <li>2</li> | |
| <li>3</li> | |
| </ul> | |
| </section> | |
| <section> | |
| <h4>側(cè)軸對齊方式：streach</h4> | |
| <ul> | |
| <li>1</li> | |
| <li>2</li> | |
| <li>3</li> | |
| </ul> | |
| </section> | |
| <section> | |
| <h4>側(cè)軸對齊方式：演示</h4> | |
| <ul> | |
| <li>1</li> | |
| <li>2</li> | |
| </ul> | |
| </section> | |
| </body> | |
| </html> |
新聞熱點
疑難解答
