flex布局

1.单独制作移动端页面（主流）有四种：

（1）流式布局（用百分百比布局）；
（2) flex弹性布局（常用）；
（3）less+rem+媒体查询布局；
（4）混合布局；

2.响应式布局（页面兼容）：

（1）bootstrap；
（2）媒体查询；

流式布局（常见）

流式布局：就是百分比布局，也称非固定像素布局。
原理：通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
可以设置max-width最大宽度( max-height最大高度)，min-width最小宽度( min-height最小高度)，控制父盒子的大小；

flex布局

flex是flexible Box的缩写，意为"弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

原理：就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式

常见父项属性
以下由6个属性是对父元素设置的
●flex-direction :设置主轴的方向,默认为row,从左到右，row-reverse:从右到左，column:从上到下，column-reverse:从下到上；
●justify-content :设置主轴上的子元素排列方式，默认flex-start(从头部开始，如x轴，从左到右），flex-end:从尾部开始排列，center：在主轴居中对齐，space-around，平分剩余空间，space-between：先两边贴边，再平分剩余空间（最常用）；
●flex-wrap： 设置子元素是否换行，默认nowarp不换行，如果装不开，会缩小子元素的宽度,warp：换行；
●align-items：（与主轴方向有关） :设置侧轴上的子元素排列方式(单行)，flex-start：从上到下，flex-end：从下到上，center：挤在一起居中（垂直居中），stretch：拉伸，默认值；
●align-content ：设置侧轴上的子元素的排列方式(多行)，space-around：子项在侧轴平分剩余空间，space-between：子项先在侧轴分布两头，再平分剩余空间，其余与align-items一样；stretch：设置子项元素高度平分父元素高度；
●flex-flow :row wrap；复合属性，相当于同时设置了flex-direction和flex-wrap

flex布局子项常见属性
●flex 属性定义子项目分配剩余空间，用flex表示占多少份数

●align-self控制子项自己在侧轴的排列方式，允许单个项目有与其他项目不一样的对齐方式, 可覆盖align-items属性。默认值为auto ,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch,

●order属性定义子项的排列顺序 (前后顺序)，数值越小，排列越靠前，默认为零，注意：和z-index不一样；

flex布局注意事项：当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效

采用Flex布局的元素,称为Flex容器( flex container) , 简称"容器".它的所有子元素自动成为容器成员,称为Flex项目( flex item) , 简称"项目".

<div>
	<span></span>
	<span></span>
</div>

●div就是flex父容器。
●span就是子容器flex项目
●子容器可以横向排列也可以纵向排列

传统布局 VS flex布局

传统布局：兼容性好 ，但 布局繁琐 ， 具有局限性，不能在移动端很好的布局 ;
flex布局：操作方便，布局极为简单，移动端应用很广泛，但在PC端浏览器支持情况较差， IE11或更低版本，不支持或仅部分支持

建议∶
1.如果是PC端页面布局，建议使用传统布局。
2.如果是移动端或者不考虑兼容性问题的PC端页面布局，使用flex弹性布局