一、为什么很久以前写这篇文章的时候就接触到display:flex布局，尤其是在没有考虑低版本浏览器兼容性的情况下，我开始肆无忌惮地使用它。之前做PC端的时候，要求兼容ie8，没注意。后来做移动端的时候，第一次看到display:flex。还是一个实习生的代码，然后查了下资料。原来这么方便。简单的使用和原理可以参考阮一峰大师的讲解。2.父元素的基本使用{display:flex;}flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content可以有6个属性可以设置，这里不再细说。子元素{flex:none|汽车;/*defaultauto*/}/*1表示元素将剩余空间填满*/{flex:1}主要想说说子元素的flex属性。容易明白。理解了这个之后，就可以实现固定左右自适应的布局，一般在列表显示的时候出现。网上也经常看到flex:1|none|auto，是以下属性造成的。每个子元素也叫“item”，属性值有：1，order//定义每个子元素的排列顺序，值越小排列越高，默认为0，它可以为负数.item{order:-1;/*任意数*/}2、flex-grow//定义子元素的放大比例，默认为0（不放大），前提是父容器有空闲space.item{flex-grow:;/*default0*/}3、flex-shrink//如果所有item的flex-shrink属性都为1，当空间不足时，都会按比例缩小。如果一个item的flex-shrink属性为0，其他item为1，前者在空间不足时不会收缩。负值对该属性没有影响。.item{flex-shrink:;/*default1*/}4.flex-basis//在子元素分配空闲空间之前，设置指定子元素的空间大小，默认auto（原值）。item{flex-basis:|汽车;/*defaultauto*/}/*可以设置为60%或者200px*/5,flex//是flex-grow,flex-shrink,flex-basis的组合，默认值flex:01auto;.item{flex:无|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]}/*这个属性有两个shortcut值：auto(11auto)和none(00auto)*//*建议优先使用这个属性，而不是单独写三个属性分开，因为浏览器会计算相关值*/6,align-self//允许单个子元素与其他子元素有不同的对齐方式，可以覆盖父元素设置的align-items属性。默认值为auto，表示继承父元素的align-items属性。如果没有父元素，则相当于拉伸（填充）。.item{对齐自我：自动|弹性启动|弹性端|中心|基线|拉紧;}我们通常会用到这个flex属性，在布局中非常有用。对于这个属性，最好手动键入，并尝试各种值的效果。3.圣杯布局layout布局一直是css很重要的一个知识点，在面试中也经常遇到。在这里，flex用于制作圣杯布局。css*{边距：0;填充：0；}html,body{宽度:100%;高度：100%；}body{显示：flex;弹性方向：列；}.header,.footer{flex:0080px;背景色：#7dbcea；}.container{弹性：自动；背景色：#145d9c；显示：弹性；}.container.left,.container.right{flex:00200px;背景色：#3a90ce；}.container.main{flex:auto;背景色：#145d9c；}html
