CSS弹性盒布局

#弹性盒布局网页

CSS 弹性盒子布局是 CSS 的模块之一，定义了一种针对用户界面设计而优化的 CSS 盒子模型；使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行。

使用弹性盒布局排版网页

1. 使用弹性盒布局一定要注意子绝父相；即需要弹性盒布局的父元素要添加position: relative;
   2.子元素使用position: absolute; display: flex; 使其实现弹性盒布局效果；
2. 如果导航栏 需要弹性盒布局，还需添加 width: 100%;使其宽度跟浏览器窗口保持一致；

flex-grow

使用flex-grow的意思是占用网页剩余的空间。
以下面为例：

 <div class="zong">
    <div class="container">
        <div class="left">1</div>
        <div class="center">2</div>
        <div class="right">3</div>
    </div>
   </div>

这里一共设置了5个div，其中class="zong"的div作为父元素，class="container"作为子元素，class="container"里面包含三个div子元素——需要弹性盒布局。接下来给他们设置样式：
首先给父元素设置相对定位：

  .zong{
            position: relative;
        }

接下来给子元素设置绝对定位、弹性盒布局、宽度及高度：

 .container{
            position: absolute;
            display: flex;
           width: 100%;
           height: 400px;
        }

这里，给三个小子元素设置宽、高度，以及设置边框，设置边框的目的是更直观的观察效果：

 .left,.center,.right{
            width: 200px;
             border:1px dashed red;
             margin:20px;
        }

以上样式显示的效果如下图：即三个小子元素是平均分布的，为了方便看效果，我给.container也添加了边框，可以看到，此时.container中还是有剩余空间的：
接下来给.left添加flex-grow: 1;
可以看到，.left占据了网页的剩余空间；
所以，flex-grow在弹性盒布局中为填充网页的剩余空间，且默认值为0
如果此时给.center也添加flex-grow样式，则原来的.left所得的空间会分给.center,如下图样式：

.center{
            flex-grow:2;
        }

给.center添加了flex-grow样式，且值比.left大，此时，.container中的剩余空间会被评分成三分，并按照1:2的比例分别给.left,.center;也就是说，flex-grow值越大，得到的空间越大。

flex-wrap换行

如果子元素的空间超过了父元素的空间，默认情况下flex不会换行，而是压缩，如果要换行，可以使用flex-wrap。

flex-shrink压缩

如果子元素的空间超过了父元素的空间，可以使用 flex-shrink压缩。