/ CSS3

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并设置,让顶部块和底部块固定到合适的视窗内。