弹性布局

流式布局: 网页默认的布局方式, 元素按照行标签从左向右,块标签从上向下依次排列, 尽量不使标签重叠 <hr>
    弹性布局: html5新增的网页布局方式, 需要手动设置, 有如下特点: <br>
    1，弹性布局总是给父元素设置， 对第一级子元素起效<br>
    2，弹性布局元素默认从左向右排列，不换行，高度为100%（包含margin）<br>
    3，弹性布局元素没有行标签块标签之分，可以正常设置宽距和宽高<br>
    4，弹性布局元素不能使用浮动， 可以使用定位<br>
    <hr>
    <h1>总结： 弹性布局中的属性设置：</h1>
    <h3>弹性容器的属性设置：</h3>
    <p>display: flex;   设置弹性容器</p> 
    <p>flex-wrap: wrap; 设置换行</p>
    <p>justify-content: space-evenly;  设置说水平对齐方式</p>
    <p>align-items: center;    设置单行对齐方式</p>
    <p>align-content: flex-start;  设置多行对齐方式</p>
    <h3>弹性元素的属性设置：</h3>
    <p>align-self: flex-end; 弹性元素单独对齐</p>
    <p>order: 1;  弹性元素的排列顺序</p>
    <p>flex-grow: 2  元素扩展比例</p>
    <p>flex-shrink: 0;元素压缩比例</p>