弹性布局

总结：
网页布局方式很多，各有各的特点。
1. 传统的div+css+float布局方式，适用于pc端
2. 自适应布局方式，要开发多套页面，服务器根据不同的客户端返回不同的页面
3. 响应式布局，开发一套页面，根据媒体查询的返回的结果，跳转布局以使用不同的客户端
4. 多列布局方式，类似报纸排版的样式
5. 弹性布局，适用与PC端与移动端
6. ...

弹性布局，又称弹性盒子,适用于pc端和移动端，等比例缩放元素的 display属性值设为flex，那么这个元素中的子元素，就会遵循弹性布局的规则以前的float clear 块状 内联 vertical-align属性都不能使用
重要概念：
主轴：开始位置 main start，结束位置 main end；main size，main axis
侧轴：开始位置 cross start，结束位置cross end；main size，main axis
侧轴永远垂直于注重
flex-direction row; 子元素沿主轴方向
flex-direction: column 子元素沿侧轴方向
flex-wrap样式：因弹性布局子元素能自动伸缩，所以，当父容器小于子元素整体尺寸时，子元素不会自动换行，而是自动伸缩
属性 wrap：自动换行
属性 wrap-reverse：翻转换行，超出范围把超出的元素的放到上一行
justify-content 样式
以主轴方向为例：子元素水平方向排列后，默认依次靠左排列
flex-start(默认)：左对齐
flex-end：右对齐，end效果一样？
center：居中
space-between：两端对齐，子元素之间间距都相等
space-around：每个子元素两侧的间距相等

flex，居右end等，就可以使用justify-content
align-items(垂直居中) 与 align-content
flex-start（默认）：上对齐
flex-end：下对齐
center：居中
flex：可以给某个具体的元素设置占整个弹性布局的比例