流式布局，就是百分比布局，也称非固定像素布局。通过盒子的宽度设置成百分比来根据屏幕宽度进行伸缩，不受固定像素限制，内容向两侧填充。流式布局方式是移动web开发使用的比较常见的布局方式。

 

　　传统布局：

 

　　兼容性好布局繁琐局限性，不能在移动端很好的布局

 

　　flex弹性布局：

 

　　操作方便，布局极为简单，移动端应用广泛PC端浏览器支持情况较差IE11或更低版本，不支持或仅支持部分

 

　　建议：

 

　　如果是PC端页面布局，我们还是传统布局如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局

 

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

 

　　当我们为父元素设置为flex布局以后，子元素的float、clear和vertical-align属性将失效。

 

　　伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局。

 

　　采用flex布局的元素，称为flex容器（flex container），简称容器。它的所有子元素将自动成为容器成员，称为flex项目，简称项目。

 

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

 

　　总结：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

 

　　以下6个属性是对父元素设置的：

 

　　：设置主轴的方向。

 

　　：设置主轴上的子元素排列方式。

 

　　：设置子元素是否换行。

 

　　：设置侧轴上的子元素的排列方式（多行）。

 

　　：设置侧轴上的子元素排列方式（单行）。

 

　　：复合属性，相当于懂事设置了和。

 

　　主轴与侧轴：

 

　　在flex不居中，是分别以主轴和侧轴两个方向，同样的叫法有：行和列，x轴和y轴。默认主轴方向就是x轴方向，水平向右。默认侧轴方向就是y轴方向，垂直向下。

 

　　属性值：

 

　　属性决定主轴的方向（即项目的排列方式）

 

　　注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的。

 

　　属性值说明row默认从左到右row-reverse从右到左column从上到下column-reverse从下到上

 

　　：设置主轴上的子元素排列方式。

 

　　属性定义了项目在主轴上的对齐方式。注意：使用这个属性之前一定要确定好那个是主轴。

 

　　属性值说明flex-start默认值，从头部开始，如果主轴是x轴，则从左到右flex-end从尾部开始排列center在主轴居中对齐（如果主轴是x轴则水平居中）space-around平分剩余空间space-between先两边贴边，再平分剩余空间

 

　　：设置子元素是否换行。

 

　　默认情况下，项目都排在一条线（又称"轴线"）上。属性定义，flex布局中默认是不换行的，如果装不开会缩小子元素的宽度。

 

　　属性值说明nowrap默认值，不换行wrap换行

 

　　：设置侧轴上的子元素排列方式（单行）

 

　　该属性时控制子项在侧轴（默认是y轴）上的排列方式，在子项为单向的时候使用。

 

　　属性值说明flex-start从上到下flex-end从下到上center垂直居中stretch拉伸（默认值）

 

　　：设置侧轴上的子元素的排列方式（多行）

 

　　设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），在单行下是没有效果的。

 

　　属性值说明flex-start在侧轴的头部开始排列flex-end在侧轴的尾部开始排列center在侧轴中间显示space-around子项在侧轴平分剩余空间space-between子项在侧轴先分布在两头，再平分剩余空间stretch设置子项元素高度平分父元素高度（默认值）

 

　　和的区别：

 

　　使用于单行情况下，是有上对齐、下对齐、居中和拉伸。适用于换行（多行）情况下，单行情况下无效，可以设置上对齐、下对齐、居中、拉伸预计平均分配剩余空间等属性值。总结就是：单行找，多行找。

 

　　：和属性的复合属性。

 

　　相当于简写。

 

　　属性：定义子项目分配剩余空间，用flex来表示占多少份数。

 

　　像这样中间灰色的盒子就将剩余空间分成一份。

 

　　：控制子项自己在侧轴上的排列方式。

 

　　属性允许单个项目与其他项目不一样的对齐方式，可覆盖属性。默认值为auto，表示继承父元素的属性，如果没有父元素，则等同于stretch。

 

　　属性：定义项目的排列顺序。

 

　　数值越小，排列越靠前，默认为0。注意：和z-index不一样。

 

　　rem单位

 

　　rem（root em）是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对与html元素的字体大小。比如，根元素（html）设置非根元素设置则会换成px表示就是24px。 优势：可以通过修改html里面的文字大小来改变页面中元素大小，可以整体控制。