1.为什么flex知道HTML正常的文档流是从上到下排列的，块级元素会像下图左图这样排列。但是在项目中，尤其是移动端项目中，会有很多要求排版方式是从左到右排列的。虽然可以通过display:inline-block,float,position进行排版，但是需要计算距离，很麻烦。2009年，W3C提出了一个新的解决方案——引入灵活布局的flex方法，通过容器的轴来排列item，简直是移动端开发的福音（虽然网格布局更好，后面会总结).用了很久，但是有些参数记忆很模糊，所以每次用都要去百度，还不如自己总结一下。//常规写法.cover-common{position:relative;}.cover-common.item{position:absolute;左：50%；顶部：50%；左边距：-50px；margin-top:-50px}//flexwriting.cover-flex{display:flex;证明内容：居中；align-items:center}以上是水平和垂直居中的两种方式。可以看到写起来简单多了，直接写在容器上就好了，不用考虑具体的项目。二、什么是flex那么，什么是flex？借用阮一峰老师的一张图来看flex的一些概念：1.flex容器（container）：使用flex的元素称为容器。容器中默认有两个轴，主轴（mainaxis）和垂直横轴（crossaxis）。轴开始的位置称为main/crossstart，结束的位置称为main/crossend。项目沿主轴开始和结束方向排列。2.弹性项（item）：容器正下方的第一级元素称为项。3.容器配置flex容器的属性有很多。下面介绍一些常用的：1.flex-direction：设置容器主轴的方向2.flex-wrap：设置是否换行。第3行，justify-content：设置项目在主轴方向的对齐方式4，align-items：设置项目在横轴方向的对齐方式5，align-content：多轴对齐1，使用flex-direction设置容器的主轴方向和主轴起点。有如下四个属性值，结果如下图所示。.box{弹性方向：行；//(默认值)主轴水平，起点在左边flex-direction:row-reverse;//主轴水平，起点在右边flex-direction:column;//主轴垂直，起点在上flex-direction:column-reverse;//主轴垂直，起点在底部}2.flex-wrap用于设置是否一条轴线是否满，是否有新行来轴有3个属性值。.box{flex-wrap:nowrap;//（默认值）设置不换行，直接挤压flex-wrap:wrap;//换行，第一行从横轴起点开始按顺序排列flex-wrap:wrap-reverse;换行，但是是从后面带上来的，第一行从横轴的末端开始排列}还有一个flex-flow属性：是flex-direction属性和flex-wrap属性的简写形式，值分别为flex-direction属性值和flex-wrap属性值。默认值是flex-flow:rownowrap。.box{flex-flow:||;}3.justify-content用于设置项目在主轴方向的排列。.box{justify-content:flex-start;//(默认值)对齐主轴起点justify-content:flex-end;//对齐主轴终点justify-content:center;//对齐主轴中心justify-content:space-between;//主轴两端对齐，item间距相等justify-content:space-around;//item两侧间距相等，所以item间距是两者间距的两倍endsjustify-content:space-evenly//item间距相等，两端间距也相等}4.align-items用于设置item在横轴上的对齐方式。.box{align-items:flex-start;//横轴起点对齐align-items:flex-end;//横轴终点对齐。align-items:center;//横轴居中。align-items:baseline;//item首行文本的基线对齐方式。align-items:stretch;//如果item的高度没有设置或者设置为auto，会占据整个容器的高度。}5.align-content用于设置多轴在交叉轴上的对齐方式，仅对多轴有效。.box{align-content:flex-start;//与横轴起点对齐。align-content:flex-end;//与横轴的末端对齐align-content:center;//与横轴的中心对齐align-content:space-between;//与横轴的两端对齐crossaxisalign-content:space-around;//每条轴两边的间隔相等。因此，轴之间的距离是轴与框架之间的距离的两倍。对齐内容：拉伸；（默认值）轴占据整个交叉轴}四、项目配置除了设置容器外，还可以设置项目本身。1.order：定义item在容器中的排列顺序2.flex-grow：定义item的放大比例3.flex-shrink：定义item的缩小比例4.flex-basis：定义尺寸item在分配多余空间之前占用的主轴空间5.align-self：允许单个item与其他item有不同的对齐方式，可以覆盖align-items属性1.order定义了item的位置。默认值为0，值越小，越靠前。所以如果你想向前移动这个项目而不改变其他项目，你需要将它设置为负数。.item{订单：编号；//default0}2.flex-grow用于定义item的放大比例，即分配剩余空间的能力。默认值为0，表示不参与分配。如果是2，说明比1分配了1倍。.item{flex-grow:number;//default0}3.flex-shrink定义item的收缩率。如果项目空间不足，它会默认收缩。默认值为1，设置为0则不收缩，负数无效等同于1。设置为2则压缩效果加倍。.item{弹性收缩：数字；//default1}4.flex-basis定义item在分配额外空间之前所占用的主轴空间（mainsize）。浏览器根据这个属性计算主轴是否有多余空间。它的默认值为auto，即项目的原始大小。感觉没什么用....item{flex-basis:length|汽车;//默认auto}5，flexflex-grow、flex-shrink、flex-basis三个属性的缩写。.item{flex:无|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]}6.align-self用于设置单个item在横轴上的对齐方式，可以覆盖align-items的属性值。默认值为auto，其他值同align-items。.item{对齐自我：自动|弹性启动|弹性端|中心|基线|stretch;}flex布局简单实用吗？了解了container、item、主轴、交叉轴的概念，就实用Bar了！参考文章如有不妥之处，欢迎指正！
