弹性盒flex属性

+flex 弹性元素

        => 改变其所有 子一级 元素的排列方式

        => 当你设置了 display flex 得时候

        => 弹性父级: 设置 display flex 得元素

        => 弹性子级: 其所有得子一级元素

+弹性父级的属性

       1. flex-direction 表示主轴方向

       + 默认值:

                row: 表示水平方向排列, 从左到右, 侧轴垂直方向排列从上到下

      + 可选值:

                row-reverse: 表示水平方向排列, 从右到左, 侧轴垂直方向排列从上到下

                column: 表示垂直方向排列, 从上到下, 侧轴水平方向排列从左到右

                column-reverse: 表示垂直方向排列, 从下到上, 侧轴水平方向排列从左到右

    2. justify-content 表示主轴方向元素排列方式(不改变元素顺序)

      + 默认值: 

        flex-start: 所有元素堆叠在主轴开始位置

      + 可选值:

        flex-end: 所有元素堆叠再主轴结束位置

        center: 所有元素居中排列

        space-between: 所有空白填充再两者之间(左右两个元素顶格)

        space-around: 所有空白环绕再每一个子元素两遍

          => 空白位置是 200px

          => 一共是 6 个元素

          => 就把 200 分为 12 份

          => 每一个元素一边放一份

        space-evenly: 表示均分所有空白位置

          => 每一个元素之间得间距

          => 和两遍元素和边得间距一致

          => 注意: 这个值 安卓 不支持, 只有 IOS 支持

    3. aline-items 表示侧轴得排列方式

      + 前提: 当子元素没有换行得时候(只有一行得时候)

        => 多行得时候也可以生效, 但是和我们想想得不一样

        => 就是在子级得侧轴上去到指定位置

      + 默认值:

        flex-start: 表示排列在侧轴开始位置

      + 可选值:

        flex-end: 表示排列在侧轴结束位置

        center: 表示排列在侧轴得中心位置

    4. flex-wrap 表示是否开启换行

      + 默认值:

        no-wrap: 表示不允许换行

      + 可选值:

        wrap: 表示可以换行

      + 换行规则

        1. 计算你能换多少行(3行)

        2. 把侧轴分成三份(均分三份)

        3. 侧轴不会挤压元素, 超出去就直接溢出

    5. aline-content 表示侧轴得排列方式(多行)

      + 前提: 你要开启换行, 有多行元素得时候

      + 设置规则:

        => 把每一行当成一个整体

        => 在设置得时候, 是以一行为单位

        => 以整体侧轴来进行设置

      + 默认值: 没有

      + 可选值:

        flex-start: 所有单位堆叠在侧轴开始

        flex-end: 所有单位堆叠在侧轴结束

        center: 所有单位堆叠在侧轴中间

        space-between: 所有侧轴上得空白均分在每两个单位之间

          => 上下两个单位顶格

        space-around: 所有侧轴上得空白均匀环绕在每一个单位得两边

        space-evenly: 所有侧轴上得单位均匀分布在中间位置

    当一个元素内部没有子元素, 只有文本得时候

      + 会把所有文本内容当作一个子元素看待

    6.flex-flow 是两个属性的集合

      +flex-direction和flex-wrap的集合

弹性子级上的属性

        

1. aline-self 表示自己单独一个元素得侧轴排列方式

      + 默认值: 跟随父级得侧轴排列方式设置

      + 可选值:

        start: 表示我自己单独排列在侧轴开始位置

        end: 表示我自己单独排列在侧轴结束位置

        center: 表示我自己单独排列在侧轴中间位置

      + 多行得时候

        => 你的子元素有多行得时候, 每一行上的子元素都有自己得独立行侧轴

        => 就在自己得独立行侧轴上进行移动

        => 当你得弹性父级设置了多行侧轴排列方式以后, 每一个元素的独立侧轴就一样了

    2. flex 表示自己占总体得多少份

      + flex: 数字;

      + 每一个子元素都可以设置 felx 也可以不设置

      + 需要把所有设置了 felx 属性得元素得值 求和(10)

      + 每一个元素上设置得 flex 为几, 就站 十分之几

      + 是子元素中所有设置了固定宽度以后得值

      + 弹性宽度

      + 当你设置了弹性宽度以后

        => 会有内容挤压得行为存在

        => 内容挤压得时候, 优先挤压 弹性 宽度得元素

        => 直到弹性元素得宽度不能再被挤压得时候, 挤压定宽元素

        => 直到所有元素都不能再挤压得时候, 会溢出

    3. order 表示自己所在得排序位置

      + order: 数字;

      + 确定自己得排序位置

      + 设置他们得顺序关系

      + 数字越大越向后排列