flex布局
新版的为display为flex 老版的为display为webkit-box；
布局方向 老版的布局方向
flex-direction: row; -webkit-box-orient: horizontal;
flex-direction: column; -webkit-box-orient: vertical;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> { margin: 0; padding: 0; } #wrap{ width: 400px; height: 300px; border: 1px solid; margin:100px auto; display:flex; /*x排列*/ flex-direction: column; } #wrap > .item{ width: 50px; height: 50px; background: pink; text-align: center; line-height: 50px; } </style> </head> <body><div id="wrap"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div> </body> </html>
flex布局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> { margin: 0; padding: 0; } #wrap{ width: 400px; height: 300px; border: 1px solid; margin:100px auto; display:-webkit-box; /* x排列*/ -webkit-box-orient: vertical; } #wrap > .item{ width: 50px; height: 50px; background: pink; text-align: center; line-height: 50px; } </style> </head> <body><div id="wrap"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div> </body> </html>
box布局老版容器排列方向
-webkit-box-direction: normal;
-webkit-box-direction: reverse;
（注意:项目永远是沿着主轴的正方向排列的）
-webkit-box-direction属性本质上改变了主轴的方向
新版
flex-direction:row-reverse;
flex-direction:column-reverse;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #wrap{ width: 400px; height: 300px; border: 1px solid; margin:100px auto; display:flex; flex-direction: row-reverse; } #wrap > .item{ width: 50px; height: 50px; background: pink; text-align: center; line-height: 50px; } </style> </head> <body> <div id="wrap"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div> </body> </html>
flex容器排列方向
温馨提示: 本文由杰米博客推荐，转载请保留链接: https://www.jmwww.net/file/web/10011.html
