本文主要记录自己遇到的一些flex布局案例。简要回顾常见的flex属性。6个常用的容器属性。flex-flow属性是flex-direction属性和flex-wrap属性form的缩写，默认值为rownowrap。flex-direction属性决定了主轴的方向（即项目排列的方向）。默认情况下，flex-wrap项目排列在一条线上（也称为“轴”）。flex-wrap属性定义了轴线不适合时如何换行。justify-content属性定义项目如何在主轴上对齐。align-items属性定义项目如何在交叉轴上对齐。align-content属性定义了多个轴的对齐方式。如果项目只有一个轴，则此属性无效。6个常用的元素属性flex属性是flex-grow、flex-shrink和flex-basis的缩写，默认值为01auto。最后两个属性是可选的。（如果所有item的flex-grow属性都为1，则平分剩余空间（如果有的话）。如果一个item的flex-grow属性为2，其他都为1，则前者占用的剩余空间为将是其他项目的两倍。）flex:1相当于flex-grow:1flex-grow属性定义项目的缩放比例，默认为0，即如果有剩余空间，它不会放大。flex-shrink属性定义了item的缩小比例，默认为1，即如果空间不足，item会缩小。（如果所有item的flex-shrink属性都为1，当空间不足时，它们会按比例缩小。如果一个item的flex-shrink属性为0，其他item为1，则前者不会收缩thereisinsufficientspace.负值对该属性没有影响。）flex-basis属性定义了一个item在分配多余空间之前在主轴（mainsize）上占据了多少空间。浏览器根据这个属性计算主轴是否有多余空间。它的默认值为auto，即项目的原始大小。（可以设置为与width或height属性相同的值（如350px），则项目将占据固定的空间。）order属性定义了项目排列的顺序。值越小，排名越高，默认为0。align-self属性允许单个项与其他项有不同的对齐方式，可以覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性。如果没有父元素，相当于stretch。更详细的基础知识，我贴几个我收藏的链接。软弹性布局就是这么简单！30分钟学会Flex布局demo：Flexbox演示站1.上中下布局，中间自适应
