作者:我叫博小微 | 来源:互联网 | 2023-05-17 19:46
原文链接:http://www.frontopen.com/288.html
webkit-box
1、之前要实现横列的web布局,通常就是float或者display:inline-block; 但是都不能做到真正的流体布局。至少width要自己去算百分比。
2.flexible box 就可以实现真正意义上的流体布局。只要给出相应属性,浏览器会帮我们做额外的计算。
提供的关于盒模型的几个属性:
box-orient 子元素排列 vertical or horizontal box-flex 兄弟元素之间比例,仅作一个系数 box-align box 排列 box-direction box 方向 box-flex-group 以组为单位的流体系数 box-lines box-ordinal-group 以组为单位的子元素排列方向 box-pack以下是关于flexible box的几个实例 1、三列自适应布局,且有固定margin: 2、当一列定宽,其余两列分配不同比例亦可(三列布局,一列定宽,其余两列按1:2的比例自适应): 3、下面是一个常见的web page 的基本布局: |