弹性盒（新）容器属性和子元素属性的归纳整理

概述：弹性盒是CSS3中新增的一种布局模式，也称为Flexbox。它提供了一种更加灵活的方式来布局和排列元素，特别适用于响应式设计和移动端开发。使用弹性盒可以轻松地实现元素的对齐、分布、排序和伸缩等操作，而不需要使用传统的浮动、定位和表格布局等方式。弹性盒模型包括容器和项目两个部分，容器定义了弹性盒的基本属性和行为，而项目则是弹性盒中的每个元素。弹性盒的属性有很多，例如flex-direction、justify-content、align-items等，可以通过这些属性来控制弹性盒的布局和样式。

容器属性：

1.flex-direction:定义了主轴的方向（即弹性盒的排列方向），取值有四个：row（默认值，主轴为水平方向，起点在左端）、row-reverse（主轴为水平方向，起点在右端）、column（主轴为垂直方向，起点在上沿）、column-reverse（主轴为垂直方向，起点在下沿）。

属性：

• row：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

2.flex-wrap:定义了弹性盒子元素在父容器中是否换行，取值有三个：nowrap（默认值，不换行）、wrap（换行，第一行在上方）、wrap-reverse（换行，第一行在下方）。

属性：

• nowrap：不换行。
• wrap：换行，第一行在上方。
• wrap-reverse：换行，第一行在下方。

3.justify-content:定义了弹性盒子元素在主轴上的对齐方式，取值有五个：flex-start（默认值，左对齐）、flex-end（右对齐）、center（居中对齐）、space-between（两端对齐，项目之间的间隔相等）、space-around（每个项目两侧的间隔相等，所以项目之间的间隔比项目与边框之间的间隔大一倍）。

属性：

• flex-start：左对齐。
• flex-end：右对齐。
• center：居中对齐。
• space-between：两端对齐，项目之间的间隔相等。
• space-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边框之间的间隔大一倍。

4.align-items:定义了弹性盒子元素在交叉轴上的对齐方式，取值有五个：stretch（默认值，如果项目未设置高度或设为auto，将占满整个容器的高度）、flex-start（交叉轴的起点对齐）、flex-end（交叉轴的终点对齐）、center（交叉轴的中点对齐）、baseline（项目的第一行文字的基线对齐）。

属性：

• stretch：如果项目未设置高度或设为auto，将占满整个容器的高度。
• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline：项目的第一行文字的基线对齐。

5.align-content:定义了多根轴线的对齐方式，如果只有一根轴线，则该属性不起作用。取值有六个：stretch（默认值，轴线占满整个交叉轴）、flex-start（与交叉轴的起点对齐）、flex-end（与交叉轴的终点对齐）、center（与交叉轴的中点对齐）、space-between（与交叉轴两端对齐，轴线之间的间隔平均分布）、space-around（每根轴线两侧的间隔相等，所以轴线之间的间隔比轴线与边框之间的间隔大一倍）。

属性：

• stretch：轴线占满整个交叉轴。
• flex-start：与交叉轴的起点对齐。
• flex-end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔相等，所以轴线之间的间隔比轴线与边框之间的间隔大一倍。

子元素属性：

1.order： 定义了弹性盒子元素的排列顺序，数值越小，排列越靠前，默认为0。

属性：

• 数值：定义了弹性盒子元素的排列顺序，数值越小，排列越靠前，默认为0。

2.flex-grow： 定义了弹性盒子元素的放大比例，即当剩余空间有多余时，弹性盒子元素按照flex-grow的比例分配，默认值为0，即不放大。

属性：

• 数值：定义了弹性盒子元素的放大比例，即当剩余空间有多余时，弹性盒子元素按照flex-grow的比例分配，默认值为0，即不放大。

3.flex-shrink： 定义了弹性盒子元素的缩小比例，即当空间不足时，弹性盒子元素按照flex-shrink的比例缩小，默认值为1，即可缩小。

属性：

• 数值：定义了弹性盒子元素的缩小比例，即当空间不足时，弹性盒子元素按照flex-shrink的比例缩小，默认值为1，即可缩小。

4.flex-basis： 定义了弹性盒子元素在主轴方向上的初始大小，默认值为auto，即由元素的内容决定。

属性：

• auto：由元素的内容决定。
• 数值：定义了弹性盒子元素在主轴方向上的初始大小。

5.flex： 是flex-grow、flex-shrink和flex-basis的缩写，用于设置弹性盒子元素的伸缩属性。

属性：

• flex-grow：定义了弹性盒子元素的放大比例。
• flex-shrink：定义了弹性盒子元素的缩小比例。
• flex-basis：定义了弹性盒子元素在主轴方向上的初始大小。

6.align-self： 定义了弹性盒子元素在交叉轴上的对齐方式，取值与align-items相同，但它只作用于单个元素，而不是整个容器。如果该元素的父容器设置了align-items属性，则align-self会被覆盖。

属性：

• auto：继承父元素的align-items属性。
• stretch：如果项目未设置高度或设为auto，将占满整个容器的高度。
• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline：项目的第一行文字的基线对齐。