常见的弹性盒子布局

1.等分布局

所谓等分布局就是指一行被分为若干行，每一列的宽度是相同的值。

---

 代码实现如下：

body主体部分代码如下：

    

        
        
天猫
        
淘宝
        
京东
        
苏宁
    
css样式代码如下：
.container{
            width: 500px;
            height: 200px;
            border: 1px solid ;

            /* 设置为弹性盒子 */
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .content{
            width: 100px;
            height: 100px;
            
            border: 1px solid;
        }

 2.流式布局

所谓流式布局即为使用百分比设置宽高的布局，随着设备屏幕的改变，容器的宽高、位置地变化。

注意：百分比是指该容器的宽高是其父容器的百分之几。

通常盒子使用百分比来设置宽度时，都设置盒子的最大宽度和最小宽度。比如：max-width、min-width、max-height、min-height属性，IE7以上兼容。
当盒子在 min~max 两个值之间时，根据其父容器的百分比进行缩放；否则保持在最大值或最小值的状态。

主体盒子和子集盒子如下

        

        

        

        

        

        

        

        

        

        

    
css样式如下：
 .container{
            width: 600px;
            height: 600px;
            border: solid 1px #008c8c;
            resize: both;
            overflow: hidden;
            /* 设置弹性盒子 */
            display: flex;
            /* 设置主轴 */
            flex-direction: row;
            /* 是否换行 */
            flex-wrap: wrap;
            /* 对齐方式 */
            align-content: flex-start;
        }
        .container div{
            border: 1px solid hotpink;
            width: 100px;
            height: 100px;
            flex:  1 1 auto;
        }

3.圣杯布局

所谓圣杯布局是一个两侧宽度固定，中间宽度自适应的三栏布局。

 代码示例如下

主体结构如下：

        

        

            

            

            

        
        

    

css样式如下：
 .container{
            width: 500px;
            height: 500px;
            /* 给父级盒子设置为弹性盒子 */
            display: flex;
            flex-direction: column;
            resize: both;
            overflow: hidden;
            border: 1px solid red;
        }
        .head,.foot,.left,.right{
            /* head foot left right 按照比例自适应 */
            flex: 0 0 30%;
            border: hotpink 1px solid;
        }
        .main{
            /* main自适应 */
            flex: 1 1 auto;
            /* 给main设置为弹性盒子，使得main内部的left和right可以按照比例自适应 */
            display: flex;
            border: solid 1px green;

        }
        .center{
            /* center自适应 */
            flex: 1 1 auto;
        }

（第一次写博客，有些小激动！）