Play Flex Box Easy 用到的flex属性

        1.justify-content

        Defines how the browser distributes space between and around content items along the main-axis of a flex container.
        定义浏览器如何沿 flex 容器的主轴在内容项之间和周围分配空间。
        center 中心
        flex-start 弹性启动
        flex-end 柔性端
        space-between 间距
        space-around 空间周围
        space-evenly 空间均匀

        2.align-items

        Defines how the browser distributes space between and around content items along the cross-axis of a flex container.
        定义浏览器如何沿 flex 容器的十字轴在内容项之间和周围分配空间。
        center 中心
        flex-start 弹性启动
        flex-end 柔性端
        baseline 基线
        stretch 伸展

        3.flex-direction

        Sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).
        设置挠性项目在挠性容器中的放置方式，定义主轴和方向（法线或反向）。
        row 行
        row-reverse 行反转
        column 列
        column-reverse 反列

        4.order

        Sets the order to lay out an item in a flexsets the order to lay out an item in a flex container.
设置在弹性容器中布置物料的顺序设置在弹性容器中布置物料的顺序。
使用示例：
        order: 2;
        order: -1;

        5.align-self

        Overrides flex item's align-items value.
覆盖 flex 项的 align-items 值。
        center 中心
        flex-start 弹性启动
        flex-end 柔性端
        stretch 伸展

        6.flex-wrap

        ​Sets whether flex items are forced onto one line or can wrap onto multiple lines.
设置是将柔性项目强制到一行上还是可以换行到多行上。
        wrap 包装
        no-wrap 无包装
        wrap-reverse 反绕