flex布局，也叫弹性布局。它是现代Html的核心，它发布在CSS3.0中。

    在Deamweaver MX年代，网页的布局大多还在用Table。一个Table嵌套一个Table。
    
    那么，为什么要用div的flex布局呢？
    
    第一，因为，在CSS3.0中引入了media query，也就是@media，说白了也就是网页可以根据浏览器或屏幕的宽度或者高度来应用不同的CSS样式，也就可以在窄屏幕中以列的方式显示内容而在宽屏幕中以行的方式显示内容，也就有了同一个div在不同的页面宽度下可以有不同的显示位置和不同的显示效果。这就打破了Table的行就是行、列就是列的死板的页面固定布局方式。
    
    第二，在出现flex布局之前，所有div的组织是一件很困难的事情。你需要挨个对齐div的坐标和宽高。
    
    flex布局是一种流式的布局，你可以横向地进行流式布局，如以下代码：
    {
        display:flex;
        flex-direction:row;/*主轴：行*/
        flex-wrap:wrap;/*超出总宽度换行。（默认nowrap，默认不换行而进行压缩各单元的宽度）*/
    }
    
    也可以纵向地进行流式布局，如以下代码：
    {
        display:flex;
        flex-direction:column;/*主轴：列*/
        flex-wrap:wrap;/*超出总高度换列。（默认nowrap，默认不换列而进行压缩各单元的高度）*/
    }
    
    重要的，还有几个对应的对齐方式的配置：
    
    justify-content：子元素在主轴方向上的调整方式（子元素在主轴方向上前后空隙的控制），可以是flex-start | flex-end | center | space-between | space-around
    
    align-items：子元素在交叉轴方向上的对齐方式（比如所有子元素中心轴对齐、所有子元素贴边对齐），可以是flex-start | flex-end | center | baseline | stretch

    flex-grow：子元素增长比例，需要扩展长度的单个子div只要设置为1即可实现自动增长长度。但，自动增长对固定Header的滚动条Table支持不完善。

                            ————www.v-signon.com学习者共勉