display:box属性

  • 在移动端开发的时候,圣杯布局,弹性盒,是我们经常会用得到的,W3C很久以前就有一个display:box属性

  • display:box
    • 父元素设置该属性后,作用与display:flex类似,子元素可在一行显示,且实现自适应。
  • box-orient:horizontal/vertical
    • 父元素设置该属性后,作用与flex-direction: column相似。使子元素排列方向发生变化。
      • horizontal  水平排列,子代总width=父级width。若父级固定宽度,则子代设置的width无效,子代会撑满父级宽度。
      • vertical      垂直排列,子代总height=父级height。若父级固定高度,则子代设置的height无效,子代会撑满父级高度。
  • box-direction:normal/reverse
    • 在父级上设置该属性,作用使改变子元素的排列顺序,
      • normal  默认值,子代按html顺序排列  1,2,3,4
      • reverse  反序,所有元素相反顺序来 ,4,3,2,1
  • box-align:start/end/center/stretch
    • 在父级设置,子代的垂直对齐方式。
    • start  垂直顶部对齐
    • end 垂直底部对齐
    • center 垂直居中对齐
    • stretch 拉伸子代的高度,与父级设置的高度一致。子代height无效。
注:我们一般多使用box-align:center;来实现子元素的垂直居中。
  • box-pack:start/end/center
    • 在父级设置,子代的水平对齐方式。
    • start  水平左对齐
    • end    水平右对齐
    • center  水平居中对齐
注:我们一般多使用box-pack:center来实现子元素水平居中方式
  • box-flex: 1
    •  作用与flex: 1;相同。若子元素设置固定宽高,则子元素按照该子元素的宽和高,若没有设置该属性的子元素会占满具有display:box属性父元素中剩余的所有的空间。
    • 设置为1则为所有剩余空间,可以为负数。
    • 若子元素有margin值,则按余下(父级宽度-子代固定总宽度-总margin值)宽度占number份
 

  • 大家不难发现display:box属性与display:flex属性几乎一模一样,就下来就会有人问了,这两个一样的东西到底有什么区别呢?
  • 所以兼容性的代码,大致如下
    • display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    • display: -moz-box; /* Firefox 17- */
    • display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    • display: -moz-flex; /* Firefox 18+ */
    • display: -ms-flexbox; /* IE 10 */
    • display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
    • 如果要说区别,display:box; 是老规范,要兼顾古董机子就加上它。
    • flexbox flex 是新规范,老机子不支持的
 
上一篇:display:box;display:flex;弹性盒模型


下一篇:ThinkPHP 3.2.3 关联模型的使用