1、box盒模型

在平常的web横排布局中，会经常用到float或display:inline-block，但是在多种不同宽度的移动设备的自适应布局中用的话，还得设置百分比宽度和考虑清除浮动。

box-flex是css3新添加的盒子模型属性,一个布局应用就是布局的垂直等高、水平均分、按比例划分。

使用需要加游览器的前缀irefox(-moz)、opera(-0)、chrome/safari（-webkit)。

display:box;

必须给父容器定义该盒子属性,子容器才可以进行划分,则该容器则定义为内联元素，内部元素设置margin:0px auto无效的，要想使其居中只能通过父容器属性。

2、flex盒模型

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流。

主轴 ：项目排列方向的轴（可以是水平或者垂直），每一行（列）项目代表一条轴

交叉轴：与主轴垂直的轴（可以是水平或者垂直）；

主轴（main axis）：伸缩容器的主轴，伸缩项目主要沿着这条轴进行排列布局。

主轴起点（main-start）和主轴终点（main-end）：伸缩项目在伸缩容器内从主轴起点向主轴终点方向。

主轴尺寸（main size）：伸缩项目在主轴方向的宽度或高度就是主轴的尺寸

侧轴（cross axis）：垂直于主轴称为侧轴。

侧轴起点（cross-start）和侧轴终点（cross-end）：伸缩行从容器的侧轴起点边开始，到侧轴终点。

侧轴尺寸（cross size）：伸缩项目的在侧轴方向的宽度或高度就是项目的侧轴长度。

设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

(1)容器属性（父元素属性）

(2)项目属性（子元素）

远近互联前端小华整理发布，希望能对学习技术的你有所帮助

远近互联专业提供网站建设、APP开发、网站优化、外贸网站SEO、微信运营的品牌整合营销服务让客户通过网络品牌建立与网络传播提高业绩。