弹性盒模型新版与老版区别

弹性盒模型

注意在使用弹性盒模型 父元素要加 display ： box 或者 display：inline-box

新型的 flex : display :flex;

#box {
      display : flex;
      height: 200px;
      border: 1px solid #000;

flex-direction: column-reverse;//新版实现定义盒模型的主轴方向以及实现反向显示只需要一行 水平显示是 row 垂直显示是column

      }
      #box div {
      /*margin: auto;*/
      width: 50px;
      height: 50px;
      color: #fff;
      background-color: #f00;
      font-size: 34px;
      }

 <div id = 'box'>

  <div>1</div>

   <div>2</div>
   <div>3</div>
   <div>4</div>
   </div>

旧版的 box : display :webkit-box;//旧版的 需要加上浏览器的内核

#box {
      height : 200px;
      border:1px solid #000;
      display:-webkit-box;
      -webkit-box-orient:horizontal;//水平方向是horizontal 垂直是vertical
      -webkit-box-direction: reverse;//以上两行是老版实现 定义盒模型的主轴方向以及实现逆向显示、正向显示是normal 不写默认normal
      -webkit-box-pack : center;
     }
     #box div {
      width :50px;
      height : 50px;
      background-color:#f00;
      color:#000;

     }

新版跟旧版的盒模型在横排以及竖排之间都存在差别

主轴富裕空间的管理

富裕空间

主轴空间富裕管理

元素空间在主轴开始开始位置 富裕空间在主轴结束位置

justify-content: flex-start；

元素空间在主轴结束位置 富裕空间在主轴开始位置

justify-content: flex-end；

元素在主轴中间，富裕空间在主轴两侧

justify-content: center；

富裕空间平均分配在每两个元素之间的空间

justify-content: space-between；

富裕空间平均分配在每个元素两侧

justify-content: space-around；

老版的 要加浏览器内核 例如谷歌 -webkit

元素空间在主轴开始开始位置 富裕空间在主轴结束位置

-webkit-box-pack: start ;

元素空间在主轴结束位置 富裕空间在主轴开始位置

-webkit-box-pack: end ;

富裕空间平均分配在每两个元素之间的空间

-webkit-box-pack:justify;

元素在主轴中间，富裕空间在主轴两侧

-webkit-box-pack:center;

/*富裕空间在主轴开始位置 元素在主轴结束位置*/

新版： justify-content: flex-end；

老版： -webkit-box-pack: end ;

侧轴方向富裕空间的管理

flex:

元素空间在侧轴开始位置 富裕空间在侧轴结束位置

align-items : flex-start;、

元素空间在侧轴结束位置 富裕空间在侧轴开始位置

align-items : flex-end;

元素空间在侧轴中间位置 富裕空间在侧轴两边位置

align-items:center;

/*根据侧轴方向上文字的基线对齐*/

align-items:baseline ;

box:

-webkit-box-align: start; //所有子元素居顶

end;//所有子元素居底

center;//所有子元素居中

盒子的弹性空间

flex :flex-grow:1;

box : -webkit-box-flex:1;

子元素的尺寸 = 盒子的尺寸 * 子元素 的 box-flex属性值 /所有子元素的box-flex 属性值的和

元素具体位置设置box-ordinal-group

flex: order;

box: -webkit-ordinal-group

#box div:nth-of-type(1){

/*数值越小越靠前,可以接受负值和0 但最小值默认处理为1 */

/*flex:*/

order:5;

/*box */

/*-webkit-box-ordinal-group:1;*/

}

#box div:nth-of-type(2){

order:2;

}

#box div:nth-of-type(3){

order:3;

}

#box div:nth-of-type(4){

order:4;

}

文章有点粗糙 ，有更好的办法的或者有哪些写的不好的麻烦大佬们给个意见 一起学习一起进步 ，蟹蟹！