伸缩布局的主轴布局方向详解+注释

来源：互联网发布：淘宝蓝色金丝绒裙子编辑：程序博客网时间：2024/04/30 15:21

<!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{ overflow: hidden; } section:nth-child(1) ul li{ float: left; } section:nth-child(2) ul{ /*设置伸缩布局*/ display:flex; } section:nth-child(3) ul{ display: flex; /*主轴方向 row 水平向右*/ flex-direction: row; } section:nth-child(4) ul{ display: flex; /*主轴方向 row 水平向左*/ flex-direction: row-reverse; } section:nth-child(5) ul{ display: flex; /*主轴方向 column*/ flex-direction: column; } section:nth-child(6) ul{ display: flex; /*主轴方向 column*/ flex-direction: column-reverse; } </style> </head> <body> <section> <h4>传统网页布局</h4> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </section> <section> <h4>伸缩布局 display:flex</h4> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </section> <section> <h4>伸缩布局主轴方向：row</h4> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </section> <section> <h4>伸缩布局主轴方向：row-reverse</h4> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </section> <section> <h4>伸缩布局主轴方向：column 竖直从上向下</h4> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </section> <section> <h4>伸缩布局主轴方向：column-reverse 竖直从下向上</h4> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </section> </body> </html>

1 0