flex布局体验传统布局和Flex布局传统布局兼容性好布局繁琐有限，不能再移动了好的布局Flex布局操作简单，布局极其简单，移动端在PC端应用广泛，PC端浏览器支持较差。IE11及以下版本不支持或部分支持。建议1、如果是PC端的页面布局，我们还是用传统的布局。2、如果是移动端或者PC端的页面布局，不考虑兼容性问题，我们还是用flex。灵活性任何容器都可以指定为弹性布局。当我们为父框设置了flex属性后，子元素的float、clear、vertical-align属性就会失效。总结：flex布局的原理总结一下：就是通过给父框添加flex属性的方式来控制子框的位置和排列方式。flex布局父项的常用属性(1)主轴和侧轴在flex布局中，有两个方向：主轴和侧轴。同名有行和列，x轴和y轴*主轴默认方向为x轴方向，水平向右*副轴默认方向为y轴方向，垂直向下(2)flex-direction设置主轴的方向（即item的排列方式）注意：主轴和侧轴会发生变化，根据flex-direction设置sleep为主轴，其余为侧轴.而我们的子元素是按照主轴排列的。属性值说明默认值为row从左到右（主轴为x轴），row-reverse为从右到左（主轴为x轴），column为从上到下（主轴为y轴），row-reverse为自下而上（主轴为x轴y轴）（3）justify-content设置子元素在主轴上的排列justify-content属性定义项目在主轴上的排列注意：在设置justify-content属性之前，一定要先确定主轴是哪个属性值说明flex-start主轴是x轴排列，这是从左到右。主轴是y轴排列，从上到下。flex-end主轴是x轴排列，从右到左。主轴是y轴排列，从下往上排列。center以主轴为中心（主轴水平以x轴为中心，主轴垂直以y轴为中心）space-around等分剩余空间space-between先粘到两边再将剩余空间平分（重要）(4)flex-wrap设置子元素是否环绕默认情况下，子元素排列在一条线上（即x轴或y轴）。但是有时候子元素太多了，我们希望子元素可以换行。这时候我们需要设置flex-wrap属性。属性值表示nowrap默认值不是wrappingwrappingwrapping(5)align-items设置子元素在侧轴上的排列方式(单行)属性值说明flex-start默认值从上到下flex-endfrombottomtotopcenter挤在一起（垂直居中）stretchstretch(6)align-content设置子元素在侧轴上的排列方式（多行）注意：align-content属性只能在子元素出现时使用项目有一个换行符。在单行的情况下，它没有作用。该属性的值表示flex-start的默认值在侧轴的头部。flex-end在侧轴末端安排中心，在侧轴中间显示space-aroundchild，将剩余空间平分在侧轴上。height(7)align-content和align-items的区别*align-items适用于单行情况，只有顶部对齐，底部对齐，居中和拉伸*align-content适用于换行（多行）（单行情况下底部无效），可以设置顶部对齐、底部对齐、居中、拉伸、均匀分配剩余空间等属性值。*总结就是单行查找align-items，多行查找align-content(8)flex-flowflex-flow属性是flex-direction和flex-wrap属性的复合属性flex-flow:rowwrap;flex布局子项的常用属性(1)flex子项占用的份数flex属性定义了子项分配的剩余空间，用flex表示占用多少份。.item{flex:
