Flex从0-春风

Flex例子
阮一峰Flex布局教程 语法篇

         display: -webkit-flex;
         display: flex;
         flex-direction: row;
         /*属性决定主轴的方向 flex-direction: row | row-reverse | column | column-reverse;*/
         flex-wrap: wrap;
         /*默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。flex-wrap: nowrap | wrap | wrap-reverse;*/
         /*flex-flow: row nowrap;*/
         justify-content: flex-start;
         /*属性定义了项目在主轴上的对齐方式。justify-content: flex-start | flex-end | center | space-between | space-around;*/
         align-items: flex-end;
         /*属性定义项目在交叉轴上如何对齐。align-items: flex-start | flex-end | center | baseline | stretch;*/
         /*align-content: space-around;*/
         /*属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。align-content: flex-start | flex-end | center | space-between | space-around | stretch;*/
         order: 1;
         /*属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。*/
         /*flex-grow: 1;*/
         /*属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。*/
         flex-shrink: 1;
         /*属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。*/
         /*flex-basis: 20px; 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。*/
         flex: flex-grow flex-shrink flex-basis （flex是grow、shrink、basis集合）
         align-self: center;
         /*属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。align-self: auto | flex-start | flex-end | center | baseline | stretch;*/