Flex弹性盒

Flex弹性盒

1.是css中一种布局手段，主要用来代替浮动，flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变；

2.弹性容器
    (1)要使用弹性盒，必须设置弹性容器；
    (2)我们通过display来设置弹性容器
        Display：flex设置为块级弹性容器
        Display：inline-flex 设置为行内的弹性容器

3.弹性元素
    (1)弹性容器的子元素是弹性容器
    (2)一个元素可以同时是容器和元素
复制代码

Flex弹性盒的属性

1.Flex-direction 指定容器中弹性元素的排列方式

    可选值：
    (1)Row 默认值，弹性元素在容器中水平排列（左向右）；
    (2)Row-reverse 反向水平排列
    (3)Column 弹性元素竖向排列（自上向下）
    (4)Column-reverse 反向竖向排列

    主轴：弹性元素的排列方向称为主轴；
    侧轴： 与主轴垂直方向的称为侧轴。
复制代码

2.Flex-wrap 设置弹性元素是否在弹性容器中自动换行

    可选值：
    (1)Nowrap 默认值，元素不会自动换行；
    (2)Wrap 元素会自动换行。
复制代码

3.Flex-flow wrap和direction的简写属性

    例；flex-flow: row wrap
复制代码

4.Justify-content 如何分配主轴上的多余空间

    可选值：
    (1)Flex-start 元素沿着主轴起边排列
    (2)Flex-end 元素沿着主轴终边排列
    (3)Center 元素居中排列
    (4)Space-between 空白分布到元素中间
    (5)Space-around 空白分配到元素两侧
    (6)Space-evenly 空白分布到元素的单侧（兼容性不好，慎重使用）
复制代码

5.Align-items 元素在辅轴上如何对齐

    可选值
    (1)Stretch 默认值，将元素的长度设置为相同的值；
    (2)Flex-start 元素不会拉伸，沿着辅轴起边对齐；
    (3)Flex-end 沿着辅轴的终边对齐；
    (4)Center 沿着辅轴居中对齐；
    (5)Baseline 基线对齐。
复制代码

6.Align-content 辅轴空白空间的分布

     可选值
    (1)Flex-start 元素沿着辅轴起边排列
    (2)Flex-end 元素沿着辅轴终边排列
    (3)Center 元素居中排列
    (4)Space-between 空白分布到元素中间
    (5)Space-around 空白分配到元素两侧
    (6)Space-evenly 空白分布到元素的单侧（兼容性不好，慎重使用）
复制代码

Flex弹性元素的属性

1.Flex-grow 指定弹性元素的伸展的系数；

    (1)当父元素有多余空间，子元素如何伸展；
    (2)父元素的剩余空间，会按照比例进行分配；
复制代码

2.Flex-shrimk 指定弹性元素的收缩系统

    当父元素的空间不足以容纳所有的子元素时，如何对子元素收缩
复制代码

3.Align-self 用来覆盖当前弹性元素行的align-items

    可选值
    (1)Stretch 默认值，将元素的长度设置为相同的值；
    (2)Flex-start 元素不会拉伸，沿着辅轴起边对齐；
    (3)Flex-end 沿着辅轴的终边对齐；
    (4)Center 沿着辅轴居中对齐；
    (5)Baseline 基线对齐。
复制代码

4.Flex-basis 元素的基础长度

    (1)默认值是auto，表示参考元素自身的高度或宽度；
    (2)如果传递了一个具体的数值，则以该值为准。
复制代码

5.Flex 可以设置弹性元素所有的三个样式

    (1)Flex：增长 收缩 基础；
    (2)可选值
    ①initial 默认值，相当于 flex：0 1 auto，能缩；
    ②Auto 相当于 flex：1 1 auto，能增能缩；
    ③None 相当于flex：0 0 auto，表示弹性元素没有弹性；
复制代码

6.Order 决定元素的破排列顺序

    例：order：3；数值越大越靠后。
复制代码