flex 布局

1、属性与值
    1.作用在父级 div 的属性值：
        display: flex;

        flex-direction: row / column / row-reverse / column-reverse;     flex-wrap: nowrap / wrap / wrap-reverse;

        flex-flow: row wrap;     简写以上 2 种属性值
      justify-content: flex-start / flex-end / center / space-around / space-between;    元素在主轴的对其方式，flex-direction 的值就是主轴
        align-items: flex-start / flex-end / stretch / baseline;    元素在交叉轴的对其方式
        align-content: flex-start / flex-end / center / space-around / space-between / stretch    只适用于多行的 flex 容器，并且当测周上有多余空间使 flex 容器内的 flex 线对齐。

    2.作用在子级 div 的属性值：
        flex-grow: 数值;    flex-shrink: 数值;    flex-basis: 数值;
        flex: 数值;    是以上 3 个数值值的简写，默认值为0 1 auto
        order: 定义项目的排列顺序，数值越小，排列越靠前，默认为0;

        align-serlf: auto / flex-start / flex-end / center / stretch / baseline;

2、带图行的讲解：点击打开链接

3、视频讲解及案例：点击打开链接