大概了解了flexbox
<!doctype html> <html> <head> <meta charset="utf-8"> <title>FLEX</title> </head> <body> <style> footer{ display:flex; flex-flow:row wrap; align-items: stretch; /* justify-content : flex-end; 主轴排列方式 */ /* justify-content : flex-start; */ justify-content : center; /* justify-content : space-between; */ align-content : flex-start; /* 侧轴排列方式 flex-end : 开头 center 中心 space-between 均匀排列 space-around 另一种均匀排列 stretch 伸缩排列 */ } div{ /* flex: 1 0 7rem; width:15%; */ } div:nth-child(1){ /*flex和在sencha里面的flex一样的 flex-grow flex-shrink flex-basis; */ flex : 1; } div:nth-child(2){ /* 在不改变结构的情况下,更改页面排列方式 */ order : 1; flex : 2 } </style> <!-- 神奇的flex布局.. --> <footer> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </footer> </body> </html>
天道酬勤