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