CSS flex弹性盒

目录

属性：

1、flex-direciton 指定容器中弹性元素的排列方式

2、flex-grow 指定弹性元素的伸展系数，若父元素还有多余空间时，子元素如何伸展

3、flex-shrink 指定弹性元素的伸缩系数，当父元素的空间不足以容纳所有的子元素时，对子元素进行收缩

4、flex-wrap 设置弹性元素是否在弹性容器中自动换行

5、justify-content 如何分配主轴上的空白空间

6、align-items 元素在辅轴上如何对齐，元素间的关系

7、align-content 辅轴空白空间的分布

8、flex-basis 元素基础长度，指定元素在主轴上的基础长度，

9、简写 flex

10、order 决定弹性元素的排列顺序

---

用来代替浮动来完成布局

将元素设置为弹性容器方法：

1、display：flex 设置为块级弹性容器

2、display：inline-flex 设置为行内弹性容器

弹性元素：弹性容器的子元素（后代不算）（可以同时是弹性元素和弹性容器）

属性：

1、flex-direciton 指定容器中弹性元素的排列方式

可选值：

        1、row 默认 水平排列 从左向右 主轴自左向右

        2、row-reverse 水平排列 从右向左 主轴自右向左

        3、column 纵向排列 从上向下 主轴自上向下

        4、column-reverse 纵向排列 从下向上 主轴自下向上

（侧轴：与主轴垂直的）

2、flex-grow 指定弹性元素的伸展系数，若父元素还有多余空间时，子元素如何伸展

可选值：

        数字：按比例分配

3、flex-shrink 指定弹性元素的伸缩系数，当父元素的空间不足以容纳所有的子元素时，对子元素进行收缩

4、flex-wrap 设置弹性元素是否在弹性容器中自动换行

可选值：

        1、nowrap 默认，不会自动换行

        2、wrap 沿着辅轴方向自动换行

        3、wrap-reverse 沿着辅轴反方向换行

5、justify-content 如何分配主轴上的空白空间

可选值：

        1、flex-start 元素沿着主轴起始边排列

        2、flex-end 元素沿着主轴终端边开始排列

        3、center 元素居中排列

        4、space-around 空白分布到每一个元素两侧

        5、space-evenly 空白分布到每一个元素的单侧

        6、space-between 空白均匀分布到两个元素间

6、align-items 元素在辅轴上如何对齐，元素间的关系

可选值：

        1、stretch 默认，将元素的长度设置为相同的值

        2、flex-start 元素不会拉伸，沿着辅轴起始边对齐

        3、flex-end 沿着辅轴的终端边对齐

        4、center 居中对齐

        5、baseline 基线对齐

7、align-content 辅轴空白空间的分布

可选值：

        1、flex-start 元素沿着辅轴起始边排列

        2、flex-end 元素沿着辅轴终端边开始排列

        3、center 元素居中排列

        4、space-around 空白分布到每一个元素两侧

        5、space-evenly 空白分布到每一个元素的单侧

        6、space-between 空白均匀分布到两个元素间

8、flex-basis 元素基础长度，指定元素在主轴上的基础长度，

        如果主轴是 横向 的，则该值指定的是元素宽度，

        如果主轴是 纵向 的，则该值指定的是元素高度

        默认值是auto表示参考元素自身的高度或宽度

9、简写 flex

        可以设置弹性元素的三个样式 增长 缩减 基础

        initial=“flex：0 1 auto”

        auto=“flex：1 1 auto”

        none=“flex：0 0 auto”

10、order 决定弹性元素的排列顺序