h5弹性盒模型

最新推荐文章于 2022-04-27 21:11:41 发布

chuangdang6943

最新推荐文章于 2022-04-27 21:11:41 发布

阅读量94

点赞数

原文链接：https://my.oschina.net/u/3012998/blog/806537

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width,user-scalable=no">
       <title></title>
   </head>
   <style type="text/css">
       body {
           margin: 0;
       }
       #box {
           height: 300px;
           border: 1px solid #000000;
          /*新版弹性盒模型*/
           /*display: flex;*/
           /*设置主轴方向水平（左->右）*/
           /*flex-direction: row;*/
           /*设置主轴方向垂直（上->下）*/
           /*flex-direction: column;*/
           /*设置主轴元素排列方向（右->左）*/
           /*flex-direction: row-reverse;*/
           /*设置主轴元素排列方向（下->上）*/
           /*flex-direction: column-reverse;*/
           /*主轴赋予空间管理*/
           /*justify-content: flex-start;*/
           /*justify-content: flex-end;*/
           /*justify-content: center;*/
           /*justify-content: space-between;*/
           /*justify-content: space-around;*/
           /*侧轴赋予空间管理*/
           /*align-items: flex-start;*/
           /*align-items: flex-end;*/
           /*align-items: center;*/
           /*文字基线对其*/
           /*align-items: baseline;*/


           /*老版弹性盒模型*/
           display: -webkit-box;
           /*设置主轴方向水平*/
           /*-webkit-box-orient: horizontal;*/
           /*设置主轴方向垂直*/
           /*-webkit-box-orient: vertical;*/
           /*设置主轴方向水平（左->右）*/
           /*-webkit-box-direction: normal;*/
           /*设置主轴元素排列方向（右->左）*/
           /*-webkit-box-direction: reverse;*/

           /*-webkit-box-pack: center;
           -webkit-box-pack: start;
           -webkit-box-pack: end;*/
           /*-webkit-box-pack: justify;*/
           /*-webkit-box-align: start;
           -webkit-box-align: end;
           -webkit-box-align: center;*/
       }
       #box div {
           width: 50px;
           height: 50px;
           background-color: #FF0066;
           font-size: 40px;
           color: #fff;
           /*新版*/
           /*flex-grow: 1;*/
           /*老板*/
           /*-webkit-box-flex: 1;*/
       }
       #box div:nth-last-of-type(1){
           /*order: 5;*/
           -webkit-box-ordinal-group: 1;
       }
       #box div:nth-last-of-type(2){
           /*order: 3;*/
           -webkit-box-ordinal-group: 2;
       }
       #box div:nth-last-of-type(3){
           /*order: 4;*/
           -webkit-box-ordinal-group: 3;
       }
       #box div:nth-last-of-type(4){
           /*order: 1;*/
           -webkit-box-ordinal-group: 4;
       }
       #box div:nth-last-of-type(5){
           /*order: 2;*/
           -webkit-box-ordinal-group: 5;
       }
   </style>
   <body>
       <div id="box">
           <div>1</div>
           <div>2</div>
           <div>3</div>
           <div>4</div>
           <div>5</div>
       </div>
   </body>
</html>