flex 弹性盒子布局
flex 布局可以说是目前为止最好用的布局方式,但是目前还稍微有一点受到兼容性的影响,它对 IE9 不兼容,但是在未来随着 IE9 逐渐被淘汰,我相信,它一定会在布局这块大放异彩,因为它实现了太多我们曾经不能实现的布局,而且只要简单的几个就可以搞定!
一种弹性盒模型布局方式。
flex 布局也叫弹性布局,它的特点是可以实现子元素的自适应屏幕大小,可以自由的分配每个 @R_520_2@ 需要占用的空间比例。我们把父元素称作为:容器。子元素称作为:项目。容器认存在两个轴:水平主轴(mian axis)、垂直交叉轴(cross axis)。左侧是主轴的开始点,右侧是主轴的结束点,垂直方向上顶部是交叉轴的开始位置,是交叉轴的结束位置。
通过下面两种形式都可以实现弹性盒模型“容器”的初始化。
div{
display:flex;
}
div{
display:inline-flex;
}
容器包含 点击查看详细
项目包含 点击查看详细
.demo{
display:flex
}
.demo{
display:inline-flex
}
需要父元素首先设置成 dislpay:flex
这样子元素才能起作用,而子元素的 float
、 clear
、 vertical-align
都失去作用。
子元素可以使用 position
来脱离 flex 布局。