流式布局: 网页默认的布局方式, 元素按照行标签从左向右,块标签从上向下依次排列, 尽量不使标签重叠

---

    弹性布局: html5新增的网页布局方式, 需要手动设置, 有如下特点:

    1，弹性布局总是给父元素设置， 对第一级子元素起效

    2，弹性布局元素默认从左向右排列，不换行，高度为100%（包含margin）

    3，弹性布局元素没有行标签块标签之分，可以正常设置宽距和宽高

    4，弹性布局元素不能使用浮动， 可以使用定位

   

---

   

总结： 弹性布局中的属性设置：

   

弹性容器的属性设置：

   

display: flex;   设置弹性容器

 
   

flex-wrap: wrap; 设置换行

   

justify-content: space-evenly;  设置说水平对齐方式

   

align-items: center;    设置单行对齐方式

   

align-content: flex-start;  设置多行对齐方式

   

弹性元素的属性设置：

   

align-self: flex-end; 弹性元素单独对齐

   

order: 1;  弹性元素的排列顺序

   

flex-grow: 2  元素扩展比例

   

flex-shrink: 0;元素压缩比例