CSS3：弹性盒模型

2019独角兽企业重金招聘Python工程师标准>>>

是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

以下元素展示了弹性子元素在一行内显示，从左到右:

按照一个比例分份，必须有父元素

并且父元素(同意分)设置为display:-webkit-box;

子元素设置为：-webkit-box-flex:2;子元素分的份数>=1；

分份分的是父元素除去固定部分（eg:某个一个设置为固定的宽度/高度/子元素有margin）剩余的空间；

1、在使用弹性盒模型的时候父元素必须要加display:box 或 display:inline-box:
    新版弹性盒模型：flex：display : flex
    老版弹性盒模型：box : display : -webkit-box
2、box-orient 定义盒模型的主轴方向
新版：flex：flex-direction: row / column
老版：box : -webkit-box-orient:
        horizontal 水平显示
           vertical 垂直方向 
3、box-direction 元素排列顺序
新版：flex : flex-direction: row-reverse / column-reverse;
老版：box : -webkit-box-direction:
           normal 正序
           reverse 反序
4、box-pack 主轴方向富裕的空间管理
     新版：flex : justify-content : flex-start / flex-end / center / space-between / space-around;
     老版：box : -webkit-box-pack
              start 所有子元素在盒子左侧显示，富裕空间在右侧
              end 所有子元素在盒子右侧显示，富裕空间在左
              center 所有子元素居中
              justify 富裕空间在子元素之间平均分布
5、box-align 侧轴方向方向富裕的空间管理
     新版：flex : align-items : flex-start / flex-end / center / baseline
     老版：box : -webkit-box-align
              start 所有子元素在据顶
              end 所有子元素在据底
              center 所有子元素居中
6、Box-flex 定义盒子的弹性空间
     新版：flex : flex-grow
     老版：box : -webkit-box-flex
7、box-ordinal-group 设置元素的具体位置
     新版：flex : order
     老版：box : -webkit-box-ordinal-group

 

转载于:https://my.oschina.net/u/4045971/blog/3017282