弹性盒子模型

 相信在前端开发肯定会用到盒子模型，我认为对盒子模型理解的越深，页面布局会更美观，页面优化就会更深入。

下面废话不多说，我直接和大家分析一下弹性盒子模型，弹性盒子模型和盒子模型、非标准盒子模型不同在于：弹性盒子模型能够根据子元素自动调节子元素的缩放比例，其中，弹性盒子的属性有这些:

首先是把盒子模型变成弹性盒子模型用到的属性是：display: flex;

然后就是弹性盒子中子元素的排列顺序：水平方向：从左到右：flex-direction: row;  这种排列方式也是默认的

从右到左：flex-direction: row-reverse（如果水平的宽度不够，子元素会等比例压缩）

垂直方式：从上到下：flex-direction: column   从下到上：flex-direction: column-reverse;（如果垂直方向高度不够，子元素也会等比例压缩）

下面就是换行方式：flex-wrap: nowrap（水平方向的换行方式 默认（nowrap） 如果显示不开，就等比例压缩）

再下面就是子元素的水平对齐方式：justify-content:: flex-start

flex-start;flex-start 左对齐

flex-end 右对齐

center 居中对齐

space-between 两端对齐

space-around 等间距对齐

子元素的垂直对齐方式：align-items: stretch;

注意：stretch属性使用要求子元素没有默认高度

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

#container {
            height: 300px;
            border: 1px solid red;
            display: flex;
            flex-direction: column-reverse;
           
            flex-wrap: nowrap;
           
            justify-content: flex-start;
           
            align-items: stretch;
            
        }

        #inner1 {
            width: 28%;
            height: 200px;
            background-color: blue;
            
            order: 2;
            
            
            flex-shrink: 0;
            
            flex-basis: 500px;
        }

        #inner2 {
            width: 28%;
            height: 200px;
            background-color: green;
            order: 1;
            flex-grow: 1;
        }

        #inner3 {
            width: 20%;
            height: 200px;
            background-color: brown;
            order: 3;
            /*flex-grow: 3;*/
        }
<div id="container">
    <div id="inner1"></div>
    <div id="inner2"></div>
    <div id="inner3"></div>
</div>

具体的一些属性大家可以参照阮一峰老师的个人博客

这是网址http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html