前端【弹性盒子】

实现弹性盒子

display：flex；

设置主轴方向

                                flex-direction : row(默认)       起点在左端

                                 row-reverse                          起点在右端

                                 column竖直方向                    起点在上边

                                 column-reverse 竖直方向       起点在下边  

设置子元素是否换行  默认no-wrap

设置主轴对齐方式

                                     justify-content: flex-start; 默认 轴起点对齐

                                    flex-end;  轴终点对齐

                                     center;   居中

                                       space-between; 两端对齐 中间元素间隔相等

                                       space-around：每个元素之间间隔相等

                                       space-evenly：每个元素之间间隔相等

交叉轴对齐方式

            align-items: flex-start 起点对齐

                         flex-end   终点对齐

                         center      居中

                         baseline    文本下基准线对齐  

调整换行的排列方式   align-content: flex-start;

阴影效果： 左右偏移 上下偏移 模糊距离 阴影颜色 */

        box-shadow:0px 5px 5px gray ;