css弹性盒知识总结

弹性盒包括：

弹性容器 和 弹性子元素

弹性容器设置display：flex;

然后给弹性容器设置其他的属性

1.顺序指定了弹性子元素在父容器中的位置。

  flex-direction：

    主轴方向：

    row 从左向右

    row-reverse

    侧轴方向

    column从上到下

    column-reverse

2.内容对齐属性，属性应用在弹性容器上，把弹性子元素沿着弹性容器的主轴线对齐

（横向）

justify-content：

    flex-start

            flex-end

            center

            space-between

            space-around

3.设置或者检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式

（纵向）

        align-items：

            flex-start

            flex-end

            center

            baseline 这个相当于flex-start

            stretch 这个属性，如果弹性父容器没有设置高度，或者设置高度为auto，

                    那么弹性父容器尽可能的满足弹性子元素的高度

4.设置弹性子元素的换行方式

          flex-wrap：

              nowrap 弹性容器为单行，弹性子元素在弹性容器大小太小的情况下，会溢出容器

              wrap 弹性子元素不满一行换行

              wrap-reverse

              initial

              inherit

5.设置弹性容器中的各个行的对齐，不是设置弹性子元素的对齐

        align-content:

            flex-start

            flex-end

            center

            space-between

            space-around

            stretch

二、单独针对弹性子元素设置的属性：

1、弹性盒子中弹性子元素自身在侧轴（纵轴）方向上的对齐方式：

这个属性设置是在弹性容器设置了flex相关属性后，再给弹性子元素设置下面的属性，以达到

某一个弹性子元素在侧轴（纵轴）方向上的对齐方式，是在开始的位置，还是在中间，还是在末尾

显示的属性设置

align-self：

auto

flex-start

flex-end

center

baseline

stretch

2、给指定的弹性子元素分配空间

  flex：

none  关键字的计算值为：0 0 auto

flex-grow  定义弹性盒子元素的扩展比率

flex-shrink  定义弹性盒子元素的收缩比率

flex-basis 定义弹性盒子元素的默认基准值