●IE浏览器不支持●其他浏览器需要加前缀
display:-webkit-box; //设置弹性伸缩盒模型
1.-webkit-box-orient //主要实现盒子内部元素的流动方向
有四个值:horizontal (伸缩项目从左到右水平排列)默认值
vertical(伸缩项目从上到下垂直排列)
inline-axis(伸缩项目沿着内联轴排列显示)
block-axis(伸缩项目沿着块轴排列显示)
2.-webkit-box-direction //设置伸缩容器中元素的流动顺序
-webkit-box-direction:reverse //逆序 默认值是normal(正常顺序)
3.-webkit-box-pack //用于伸缩项目的分布方式
有四个值:start (伸缩项目以起始点靠齐,相对于整个盒子模型来说)
center(伸缩项目以中心点靠齐)
end(伸缩项目以结束点靠齐)
justify(平局分布,-webkit-支持,-moz-不支持)
4.-webkit-box-align //用来处理伸缩容器的额外空间
有五个值:start(伸缩项目以顶部为基准,去除下部额外空间)
center(伸缩项目以中部为基准,去除上下部额外空间)
end(伸缩项目以底部为基准,去除上部额外空间)
baseline(伸缩项目以基线为基准,去除额外的空间)和start类似
stretch(伸缩项目填充整个容器,默认)
5.-webkit-box-flex //分配伸缩项目的比例(可用浮点数)
-webkit-box-flex:1
6.-webkit-box-ordinal-group //可以设置伸缩项目的显示位置(可与其他元素互换位置)
p:nth-child(1){
-webkit-box-ordinal-group:2
}
p:nth-child(2){
-webkit-box-ordinal-group:1
}
◆新版本写法:兼容IE11以上和所有主流浏览器新版本 大部分不需要前缀
display:flex
1.flex-direction //设置伸缩项目的流动方向
有四个值:row(设置从左到右排列)
row-reverse(设置从右到左排列)
column(设置从上到下排列)
column-reverse(设置从下到上排列)
2.flex-wrap //设置无法容纳时,自动换行
有三个值:nowrap(默认 不换行)
wrap(自动换行)
wrap-reverse(自动换行,方向和wrap相反)
3.flex-flow direction和wrap的简写形式
flex-flow:row wrap
4.justify-content //设置伸缩项目的对齐方式,和旧版本的box-pack一样
有五个值:flex-start(伸缩项目以起始点靠齐,相对于整个盒子模型来说)
center(伸缩项目以中心点靠齐,相对于整个盒子模型来说)
flex-end(伸缩项目以结束点靠齐,相对于整个盒子模型来说)
space-between(平局分布)
space-around(同上,但两端保留一半的空间)
5.align-items //与旧版本box-align一样,处理伸缩项目容器的额外空间
有五个值:flex-start(伸缩项目以顶部为基准,去除下部额外空间)
flex-end(伸缩项目以底部为基准,去除上部额外空间)
center(伸缩项目以中间为基准,去除上下部额外空间)
baseline(伸缩项目以基线为基准,去除额外的空间)
stretch(伸缩项目填充整个容器,默认)
6.align-self //(单独设置某个伸缩项目的额外空间,与align-items一样)
7.flex //用来控制伸缩容器的比例分配 与box-flex类似
8.order //和box-ordinal-group属性一样控制伸缩项目出现的顺序
◆混合过渡写法:主要针对IE10浏览器实现伸缩布局
display:-ms-flexbox
1.-ms-flex-direction //设置伸缩项目的流动方向,与旧版本box-orient属性一样
有四个值:row(设置从左到右排列)
row-reverse(设置从右到左排列)
column(设置从上到下排列)
column-reverse(设置从下到上排列)
2.-ms-flex-wrap //设置无法容纳时,自动换行
有三个值:nowrap(默认 不换行)
wrap(自动换行)
wrap-reverse(自动换行,方向和wrap相反)
3.-ms-flex-flow //direction和wrap的简写形式
-ms-flex-flow:row wrap
4.-ms-flex-pack //设置对齐方式
有四个值:start (伸缩项目以起始点靠齐,相对于整个盒子模型来说)
center(伸缩项目以中心点靠齐)
end(伸缩项目以结束点靠齐)
justify(平局分布,-webkit-支持,-moz-不支持)
5.-ms-flex-align //处理容器的额外空间
有五个值:start(伸缩项目以顶部为基准,去除下部额外空间)
center(伸缩项目以中部为基准,去除上下部额外空间)
end(伸缩项目以底部为基准,去除上部额外空间)
baseline(伸缩项目以基线为基准,去除额外的空间)和start类似
stretch(伸缩项目填充整个容器,默认)
6.-ms-flex //控制伸缩容器的分配比例
7.-ms-flex-order //控制伸缩项目出现的顺序 与box-ordinal-group一样