flex布局详细属性解释

/*  flex布局详细属性

        flex-direction flex-direction属性决定主轴的方向，即项目（或者说是子盒子）的排列方向。
              row（默认值）：主轴为水平方向，起点在左端。
              row-reverse：主轴为水平方向，起点在右端。
              column：主轴为垂直方向，起点在上沿。
              column-reverse：主轴为垂直方向，起点在下沿。

        flex-wrap   默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
                    在宽度总和超出父盒子的宽度时，希望保持每个子盒子的准确宽度，那就只能分行排列.
              nowrap（默认值）：不换行。
              wrap：换行。
              wrap-reverse：换行，第一行在下方。 

        flex-flow   flex-flow 属性是 flex-direction 和 flex-wrap 的简写。
              比如  flex-flow: column-reverse wrap;
        
        align-items   该属性定义项目在交叉轴上如何对齐。（如果主轴为水平，那么交叉轴就是垂直）
              flex-start：交叉轴的起点对齐。
              flex-end：交叉轴的终点对齐。
              center：交叉轴的中点对齐。
              baseline: 项目的第一行文字的基线对齐。
              tretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。  

        justify-content  该属性定义了项目在主轴上的对齐方式。
              flex-start（默认值）：左对齐
              flex-end：右对齐
              center： 居中
              space-between：两端对齐，项目之间的间隔都相等。
              space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
              
        align-content   align-content 属性设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间。
                        该属性对单行弹性盒子模型无效。（即：带有 flex-wrap: nowrap）。
                  基本位置对齐 
              align-content 不采用左右值 
              align-content: center;     将项目放置在中点 
              align-content: start;      最先放置项目 
              align-content: end;        最后放置项目 
              align-content: flex-start; 从起始点开始放置 flex 元素 
              align-content: flex-end;   从终止点开始放置 flex 元素   
                  默认对齐 
              align-content: normal;
                  基线对齐
              align-content: baseline;
              align-content: first baseline;
              align-content: last baseline;
                  分布式对齐 
              align-content: space-between; 均匀分布项目，第一项与起始点齐平，最后一项与终止点齐平                                                                 
              align-content: space-around;  均匀分布项目，项目在两端有一半大小的空间                                 
              align-content: space-evenly;  均匀分布项目，项目周围有相等的空间                                  
              align-content: stretch;       均匀分布项目，拉伸‘自动’ - 大小的项目以充满容器 
                  溢出对齐 
              align-content: safe center;
              align-content: unsafe center;

                  全局属性 
              align-content: inherit; 继承 
              align-content: initial;  初始值 
              align-content: unset; 未设置                
         */