css3 box 相关属性

详见此文:css box-flex介绍

文档:https://developer.mozilla.org/en-US/search?q=box,我还是喜欢火狐开发社区的文档。

display:box有以下比较有意思的属性:

  • box-flex:number,其实就是计算占父元素(或者剩下的宽度)宽度的比例 ,请点击此处demo
  • box-align:start | center | end | baseline | stretch,就是对齐方式,子元素相对父元素的边界进行对齐的方式,请点击此处demo
  • box-orient:horizontal | vertical | inline-axis | block-axis | inherit ,这个是排列方式,无非就是横排还是竖排,虽然给了四个属性设置。 请点击此处demo
  • box-lines:single | multiple。子元素是否换行,请点击此处demo
  • box-pack:start | center | end | justify。子元素如何布局,请点击此处demo
  • box-ordinal-group:number,决定子元素的排序,还记得当年使用浮动和负边距把123布局改成213布局的经典案例么?如今,不需要这么复杂啦。请点击此处demo

还有box-direction属性,有顺序和反转两个值。但是我觉得和box-ordinal-group有些重合了。

原文地址:https://www.cnblogs.com/my_front_research/p/2853496.html