流式布局（百分比布局）
flex弹性布局
less+rem媒体查询进行布局
混合布局
响应式
媒体查询
bootstrap响应式框架
流式布局
流式布局即百分比布局，也叫非固定像素布局
通过盒子的宽度设置百分比的方式来根据屏幕的宽度进行伸缩，不受固定像素的限制。
flex布局
flex布局和传统布局相比
传统布局：兼容性比较好，布局比较繁琐，局限性，在移动端布局的效率不高
flex布局：操作比较方便，布局很简单，移动端应用非常广泛，pc端的浏览器支持不是很好，ie11或者更低版本的浏览器不支持flex
如果pc端页面布局不考虑兼容性或者移动端可以大量的使用flex布局，如果要考虑兼容性，建议选择传统布局方式。
flex布局原理
Flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供大量的灵活性，任何一个容器都可以指定为flex布局
当我们给父盒子设置为flex布局后，子元素里面的float、clear 和 vertical-align属性都将失效
采用flex布局的元素称为Flex容器（flex container），简称“容器”。 它里面的所有的子元素自动称为容器的成员，称为Flex项目（Flex item），简称“项目”。
核心：通过给父元素添加flex属性来控制子盒子的排列方式
flex布局父项常见属性
flex-direction 设置主轴方向
flex-direction: row;
将x轴当做主轴，所有子元素从左到右依次排列
flex-direction: row-reverse
将x轴当做主轴，所有子元素沿着x轴从右到左进行排列
flex-direction: column;
将y轴当做主轴对待，所有子元素从上到下进行排列
flex-direction: column-reverse;
将y轴当做主轴对待，所有子元素从下到上进行排列
justify-content 设置主轴上子元素的排列方式
justify-content: flex-start;
默认值： 从头部开始，如果主轴是X轴就是从左到右，如果主轴是Y轴就是从上到下
justify-content: flex-end;
从尾部开始排列
justify-content: center;
所有子元素沿主轴进行居中对齐
justify-content: space-around;
所有子元素平分主轴上的剩余空间
justify-content: space-between;
先让边缘的两个元素贴边，然后其他的元素再平分剩余的空间
flex-wrap 设置子元素是否换行
flex-wrap: nowrap;
默认值：不换行
flex-wrap: wrap;
让子元素自动换行
align-items 设置侧轴上子元素的排列方式（单行）
align-items: flex-start;
从侧轴的头部开始排列
align-items: flex-end;
从侧轴的底部开始排列
align-items: center;
让子项沿侧轴居中
align-items: stretch;
将子项拉伸到和父级一样的高度（前提是子项不能有高度
align-content 设置侧轴上的子元素的排列方式（多行）
align-content: flex-start;
沿侧轴的顶部开始排列
align-content: flex-end;
在侧轴的底部开始排列
align-content: center;
让所有的子项侧轴居中排列
align-content: space-around;
子项沿侧轴平分剩余空间
align-content: space-between;
子项两侧先贴边，然后再平分剩余空间
|
