Flexbox布局实践
网页布局(layout)是CSS的一个重点应用,布局的传统解决方案基于盒模型,依赖display属性+position属性+float属性。2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局,Flex布局将成为未来布局的首选方案。
Part 1 Flexbox的发展历史
在2009年最早版本的Flexbox规范中,编写为“ display:box; ”
中期版本的Flexbox;我们编写为“ display:flexbox; ”
而目前的规范版本,我们定义“ display:flex; ”
目前最新版本草案已于2016年3月1日正式进入W3C的候选推荐标准(Candidate Recommendation)阶段,意味着关于flexbox的最终规范即将落地。
Part2 新版语法
基本要素
来自w3c规范中的这张图,解释了flex布局的主要思想
根据伸缩项目排列方式不同,主轴和侧轴方向也有所变化,基本上,伸缩项目是沿着主轴(main axis),从主轴起点(main-start)到主轴终点(main-end)或者沿着侧轴(cross axis),从侧轴起点(cross-start)到侧轴终点(cross-end)排列。
-
主轴(main axis):伸缩容器的主轴,伸缩项目主要沿着这条轴进行排列布局。小心,它不一定是水平的;这主要取决于“justify-content”属性。
-
主轴起点(main-start)和主轴终点(main-end):伸缩项目放置在伸缩容器内从主轴起点(main-start)向主轴终点(main-start)方向。
-
主轴尺寸(main size):伸缩项目在主轴方向的宽度或高度就是主轴的尺寸。伸缩项目主要的大小属性要么是宽度,要么是高度属性,由哪一个对着主轴方向决定。
-
侧轴(cross axis):垂直于主轴称为侧轴。它的方向主要取决于主轴方向。
-
侧轴起点(cross-start)和侧轴终点(cross-end):伸缩行的配置从容器的侧轴起点边开始,往侧轴终点边结束。
-
侧轴尺寸(cross size):伸缩项目的在侧轴方向的宽度或高度就是项目的侧轴长度,伸缩项目的侧轴长度属性是「width」或「height」属性,由哪一个对着侧轴方向决定。
定义容器的display属性
.box{
display: -webkit-flex; /*webkit*/
display: flex;
}
/*行内flex*/
.box{
display: -webkit-inline-flex; /*webkit*/
display:inline-flex;
}
容器样式
.box{
flex-direction: row | row-reverse | column | column-reverse;
/*主轴方向:左到右(默认) | 右到左 | 上到下 | 下到上*/
flex-wrap: nowrap | wrap | wrap-reverse;
/*换行:不换行(默认) | 换行 | 换行并第一行在下方*/
flex-flow: flex-direction || flex-wrap;
/*flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。*/
justify-content: flex-start | flex-end | center | space-between | space-around;
/*主轴对齐方式:左对齐(默认) | 右对齐 | 居中对齐 | 两端对齐 | 平均分布*/
align-items: flex-start | flex-end | center | baseline | stretch;
/*交叉轴对齐方式:顶部对齐(默认) | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
/*多主轴对齐:顶部对齐(默认) | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 上下平均分布*/
}
子元素属性
.item{
order: 0;
/*排序:数值越小,越排前,默认为0*/
flex-grow: 0; /* default 0 */
/*放大:默认0(即如果有剩余空间也不放大,值为1则放大,2是1的双倍大小,以此类推)*/
flex-shrink: 1; /* default 1 */
/*缩小:默认1(如果空间不足则会缩小,值为0不缩小)*/
flex-basis: 0; | auto; /* default auto */
/*固定大小:默认为0,可以设置px值,也可以设置百分比大小*/
flex: none | 'flex-grow' 'flex-shrink' 'flex-basis' ;
/*flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto,后两个属性可选。*/
align-self: auto | flex-start | flex-end | center | baseline | stretch;
/*单独对齐方式:自动(默认) | 顶部对齐 | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/
}
Part3 兼容性
除了Opera mobile12,移动端的各大浏览器都是支持flexbox的旧版语法的,但不包含flex的wrap属性。推荐实际开发过程使用autoprefixer兼容旧版语法。
微信于2016年3月份完成X5内核由webkit到Blink新内核的升级,完美支持flexbox最新语法
。
兼容性相关文章推荐
Flex布局新旧混合写法详解(兼容微信)
移动端全兼容的flexbox速成班
Part4 布局实践
用flex做垂直弹性布局
顶部栏,底部栏fixed,中间元素支持滚动条滚动,这是移动端常见的页面结构。使用传统的position:fixed
定位,会产生各种bug。但使用flexbox转换方向属性,就可以完美解决。
设置父元素 display:flex;
设置顶部块,底部块的height
值
设置中间块,flex:1;
overflow:scroll;
**注意:**一定要给父元素设置高度,最好通过js获取clientHeight并设置,让顶部块和底部块固定到合适的视窗内。