css3提供了一种崭新的布局方式:Flexbox布局,即弹性伸缩布局模型(Flexible Box),
旧版本使用的示例如下:
下面的属性都是写在div{ }中的。
1、display属性值设为box或inline-box
box 将容器盒模型作为块级弹性伸缩盒显示(旧版本)
inline-box 将容器盒模型作为内联级弹性伸缩盒模型(旧版本)
但是实际上,这两个属性值在页面上的显示效果相同。
box和inline-box属性值需要加前缀,因为目前css3没有标准格式。
2、设置box-orient属性 实现盒子内部元素的流动方向
属性值如下所示:
horizontal 默认值,伸缩项目从左到右水平排列
vertical 伸缩项目从上到下垂直排列
inline-axis 伸缩项目沿着内联轴排列显示(显示类似于horizontal)
block-axis 伸缩项目沿着块轴排列显示(显示类似于vertical)
3、box-direction 设置伸缩容器中的流动顺序(处理文本从左边还是从右边开始显示)
属性值如下所示:
normal 默认值,正常顺序,文字段落从左列向右列显示
reverse 逆序,文字段落从右列向左列显示
4、box-pack 伸缩项目的分布方式(处理所有列如何水平分布)
属性值如下所示:
start 默认,伸缩项目以起始点靠齐
end 伸缩项目以结束点对齐
center 伸缩项目以中心点对齐
justify 伸缩项目平均分布,-webkit-支持,-moz-不支持
注意:使用该属性值的前提是设置了该属性的宽度
5、box-align 用来处理伸缩容器额外的空间(处理每列的空白)
属性值如下所示:
stretch 默认,伸缩项目填充整个容器
start 伸缩项目以顶部为基准,清理下部额外空间
end 伸缩项目以底部为基准,清理上部额外空间
center 伸缩项目以中部为基准,平均清理上下部额外空间
baseline 伸缩项目以基线为基准,清理额外的空间
//基线默认都是在开头,即效果和start相同
6、box-flex 使用浮点数分配伸缩项目的比例,设置每个伸缩项目占用的比例
7、box-ordinal-group[ˈɔ:rdənl] 设置伸缩项目的显示位置
//将第一个位置的元素,跳转到第三个位置,(无论是显示的内容,还是内容所在的<p>)
注意:最好将所有列的显示位置都设置一遍,避免意外情况的发生
二、混合过渡版本
主要针对微软公司,为了使IE 10+可以使用弹性线性布局
1、display属性值设为flexbox或inline-flexbox
flexbox 将容器盒模型作为块级弹性伸缩盒显示(旧版本)
inline-flexbox 将容器盒模型作为内联级弹性伸缩盒模型(旧版本)
但是实际上,这两个属性值在页面上的显示效果相同。
flexbox和inline-flexbox属性值需要加前缀,因为目前css3没有标准格式。
2、flex-direction 相当于旧版本的box-orient和box-direction的结合
属性值如下所示:
row 默认值,列水平分布,内容从左到右排列
row-reverse 列水平分布,内容从右到左排列
column 列垂直分布,内容从上到下排列
column-reverse 列垂直分布,内容从下到上排列
3、flex-wrap 设置浏览器窗口无法容纳时,是否换行
nowrap 默认值,都在一行或一列显示
wrap 伸缩项目无法容纳时,自动换行
wrap-reverse 伸缩项目无法容纳时,自动换行,方向和wrap相反。本来换行应该从最后
一列开始换行,但设置该属性后,从第一列开始换行
4、flex-flow 集合了排列方向和控制换行的简写形式
5、flex-pack 属性和属性值与box-pack一样,设置伸缩项目的水平对齐方式
6、flex-align 属性和属性值与box-align一样,设置伸缩项目的垂直对齐方式
7、flex 属性和属性值与box-flex一样,设置每个伸缩项目所占用的比例
8、flex-order 属性和属性值与box-ordinal-group一样,设置伸缩项目出现的位置
三、新版本
兼容IE 11+和其他浏览器的新版本
1、display属性值设为flex或inline-flex
flex 将容器盒模型作为块级弹性伸缩盒显示(旧版本)
inline-flex 将容器盒模型作为内联级弹性伸缩盒模型(旧版本)
但是实际上,这两个属性值在页面上的显示效果相同。
2、flex-direction 相当于旧版本的box-orient和box-direction的结合
属性值如下所示:
row 默认值,列水平分布,内容从左到右排列
row-reverse 列水平分布,内容从右到左排列
column 列垂直分布,内容从上到下排列
column-reverse 列垂直分布,内容从下到上排列
3、flex-wrap 设置浏览器窗口无法容纳时,是否换行
nowrap 默认值,都在一行或一列显示
wrap 伸缩项目无法容纳时,自动换行
wrap-reverse 伸缩项目无法容纳时,自动换行,方向和wrap相反。本来换行应该从最后
一列开始换行,但设置该属性后,从第一列开始换行
4、flex-flow 集合了排列方向和控制换行的简写形式
5、justify-content 属性和属性值与box-pack一样,设置伸缩项目的水平对齐方式
属性值如下所示:
flex-start 伸缩项目以起始点靠齐
flex-end 伸缩项目以结束点靠齐
center 伸缩项目以中心点靠齐
space-between 伸缩项目平均分布
space-around 同上,但两端保留(相邻两列之间距离)一半的空间
6、align-items 属性和属性值与box-align一样,设置伸缩项目的垂直对齐方式
属性值如下所示:
stretch 默认,伸缩项目填充整个容器
flex-start 伸缩项目以顶部为基准,清理下部额外空间
flex-end 伸缩项目以底部为基准,清理上部额外空间
center 伸缩项目以中部为基准,平均清理上下部额外空间
baseline 伸缩项目以基线为基准,清理额外的空间
//基线默认都是在开头,即效果和start相同
7、align-self 功能、属性值和align-items一样,但他处理的是某一个伸缩项目
8、flex 属性和属性值与box-flex一样,设置每个伸缩项目所占用的比例
9、order 属性和属性值与box-ordinal-group一样,设置伸缩项目出现的位置
注意:标准弹性伸缩布局要求浏览器的版本过高,因此需要在标准格式之前加上带前缀的样式
该布局目前处于W3C的草案阶段,分为旧版本、新版本、新旧混合版本三个版本
旧版本使用的示例如下:
<div>
<p>……</p>
<p>……</p>
</div>
下面的属性都是写在div{ }中的。
1、display属性值设为box或inline-box
box 将容器盒模型作为块级弹性伸缩盒显示(旧版本)
inline-box 将容器盒模型作为内联级弹性伸缩盒模型(旧版本)
但是实际上,这两个属性值在页面上的显示效果相同。
box和inline-box属性值需要加前缀,因为目前css3没有标准格式。
div{
display:-moz-box;
display:-webkit-box; //opear使用-webkit-前缀,IE不支持,
}
2、设置box-orient属性 实现盒子内部元素的流动方向
属性值如下所示:
horizontal 默认值,伸缩项目从左到右水平排列
vertical 伸缩项目从上到下垂直排列
inline-axis 伸缩项目沿着内联轴排列显示(显示类似于horizontal)
block-axis 伸缩项目沿着块轴排列显示(显示类似于vertical)
div{
-webkit-box-orient:vertical;
-moz-box-orient:vertical;
}
3、box-direction 设置伸缩容器中的流动顺序(处理文本从左边还是从右边开始显示)
属性值如下所示:
normal 默认值,正常顺序,文字段落从左列向右列显示
reverse 逆序,文字段落从右列向左列显示
4、box-pack 伸缩项目的分布方式(处理所有列如何水平分布)
属性值如下所示:
start 默认,伸缩项目以起始点靠齐
end 伸缩项目以结束点对齐
center 伸缩项目以中心点对齐
justify 伸缩项目平均分布,-webkit-支持,-moz-不支持
注意:使用该属性值的前提是设置了该属性的宽度
5、box-align 用来处理伸缩容器额外的空间(处理每列的空白)
属性值如下所示:
stretch 默认,伸缩项目填充整个容器
start 伸缩项目以顶部为基准,清理下部额外空间
end 伸缩项目以底部为基准,清理上部额外空间
center 伸缩项目以中部为基准,平均清理上下部额外空间
baseline 伸缩项目以基线为基准,清理额外的空间
//基线默认都是在开头,即效果和start相同
div{
-moz-box-align:center;
}
6、box-flex 使用浮点数分配伸缩项目的比例,设置每个伸缩项目占用的比例
p:nth-child(1){
-moz-box-flex:1;
}
p:nth-child(2){
-moz-box-flex:3;
}
p:nth-child(3){
-moz-box-flex:1;
}
//则从左到右,这三个列所占该元素的比例为20%,60%,20%
7、box-ordinal-group[ˈɔ:rdənl] 设置伸缩项目的显示位置
p:nth-child(1){
-moz-box-ordinal-group:3;
}
//将第一个位置的元素,跳转到第三个位置,(无论是显示的内容,还是内容所在的<p>)
注意:最好将所有列的显示位置都设置一遍,避免意外情况的发生
二、混合过渡版本
主要针对微软公司,为了使IE 10+可以使用弹性线性布局
1、display属性值设为flexbox或inline-flexbox
flexbox 将容器盒模型作为块级弹性伸缩盒显示(旧版本)
inline-flexbox 将容器盒模型作为内联级弹性伸缩盒模型(旧版本)
但是实际上,这两个属性值在页面上的显示效果相同。
flexbox和inline-flexbox属性值需要加前缀,因为目前css3没有标准格式。
div{
display:-ms-flexbox;
}
2、flex-direction 相当于旧版本的box-orient和box-direction的结合
属性值如下所示:
row 默认值,列水平分布,内容从左到右排列
row-reverse 列水平分布,内容从右到左排列
column 列垂直分布,内容从上到下排列
column-reverse 列垂直分布,内容从下到上排列
3、flex-wrap 设置浏览器窗口无法容纳时,是否换行
nowrap 默认值,都在一行或一列显示
wrap 伸缩项目无法容纳时,自动换行
wrap-reverse 伸缩项目无法容纳时,自动换行,方向和wrap相反。本来换行应该从最后
一列开始换行,但设置该属性后,从第一列开始换行
4、flex-flow 集合了排列方向和控制换行的简写形式
div{
-ms-flex-flow:row wrap;
}
5、flex-pack 属性和属性值与box-pack一样,设置伸缩项目的水平对齐方式
6、flex-align 属性和属性值与box-align一样,设置伸缩项目的垂直对齐方式
7、flex 属性和属性值与box-flex一样,设置每个伸缩项目所占用的比例
8、flex-order 属性和属性值与box-ordinal-group一样,设置伸缩项目出现的位置
三、新版本
兼容IE 11+和其他浏览器的新版本
1、display属性值设为flex或inline-flex
flex 将容器盒模型作为块级弹性伸缩盒显示(旧版本)
inline-flex 将容器盒模型作为内联级弹性伸缩盒模型(旧版本)
但是实际上,这两个属性值在页面上的显示效果相同。
div{
display:flex;
}
2、flex-direction 相当于旧版本的box-orient和box-direction的结合
属性值如下所示:
row 默认值,列水平分布,内容从左到右排列
row-reverse 列水平分布,内容从右到左排列
column 列垂直分布,内容从上到下排列
column-reverse 列垂直分布,内容从下到上排列
3、flex-wrap 设置浏览器窗口无法容纳时,是否换行
nowrap 默认值,都在一行或一列显示
wrap 伸缩项目无法容纳时,自动换行
wrap-reverse 伸缩项目无法容纳时,自动换行,方向和wrap相反。本来换行应该从最后
一列开始换行,但设置该属性后,从第一列开始换行
4、flex-flow 集合了排列方向和控制换行的简写形式
div{
-ms-flex-flow:row wrap;
}
5、justify-content 属性和属性值与box-pack一样,设置伸缩项目的水平对齐方式
属性值如下所示:
flex-start 伸缩项目以起始点靠齐
flex-end 伸缩项目以结束点靠齐
center 伸缩项目以中心点靠齐
space-between 伸缩项目平均分布
space-around 同上,但两端保留(相邻两列之间距离)一半的空间
div{
justify-content:space-around;
}
6、align-items 属性和属性值与box-align一样,设置伸缩项目的垂直对齐方式
属性值如下所示:
stretch 默认,伸缩项目填充整个容器
flex-start 伸缩项目以顶部为基准,清理下部额外空间
flex-end 伸缩项目以底部为基准,清理上部额外空间
center 伸缩项目以中部为基准,平均清理上下部额外空间
baseline 伸缩项目以基线为基准,清理额外的空间
//基线默认都是在开头,即效果和start相同
div{
align-items:center;
}
7、align-self 功能、属性值和align-items一样,但他处理的是某一个伸缩项目
8、flex 属性和属性值与box-flex一样,设置每个伸缩项目所占用的比例
9、order 属性和属性值与box-ordinal-group一样,设置伸缩项目出现的位置
注意:标准弹性伸缩布局要求浏览器的版本过高,因此需要在标准格式之前加上带前缀的样式