概念

弹性容器（Flex Container）：弹性容器是包含弹性项目的父元素，用于定义弹性布局的上下文。

弹性项目（Flex Item）：弹性项目是放置在弹性容器内的子元素，它们在容器内按照一定规则排列和分配空间。

主轴（Main Axis）：主轴是弹性布局中的主要方向，弹性项目沿此方向排列。主轴可以是水平的（从左到右）或垂直的（从上到下）。

交叉轴（Cross Axis）：交叉轴是与主轴垂直的轴线，用于控制弹性项目在交叉轴上的对齐方式。

flex-direction属性：用于指定主轴的方向（row、column、row-reverse、column-reverse）。

justify-content属性：用于控制弹性项目在主轴上的对齐方式（flex-start、flex-end、center、space-between、space-around等）。

align-items属性：用于控制弹性项目在交叉轴上的对齐方式（flex-start、flex-end、center、stretch等）。

flex-wrap属性：用于控制弹性项目是否换行（nowrap、wrap、wrap-reverse）。

flex属性：用于设置弹性项目的伸缩比例，决定了它们在容器内的分配空间。

order属性：用于控制弹性项目的排列顺序。

align-self属性：用于控制弹性项目自身在交叉轴上的对齐方式，可以覆盖父容器的align-items属性。

核心部分

主轴是Flex容器内的主要方向。它定义了弹性项目在容器内排列的方向。
主轴可以是水平的（从左到右）或垂直的（从上到下），取决于flex-direction属性的设置。
弹性项目沿着主轴排列，占据主轴上的空间。

交叉轴是与主轴垂直的轴线。它是相对于主轴的垂直轴。
交叉轴的方向与主轴的方向相反，例如，如果主轴是水平的，交叉轴就是垂直的。
弹性项目在交叉轴上的对齐方式由align-items属性控制。

下面是一些示例，以帮助理解主轴和交叉轴的概念：

示例 1：水平主轴（flex-direction: row;）

主轴是水平的，从左到右。
交叉轴是垂直的，从上到下。
弹性项目在主轴上水平排列，占据主轴上的空间。
弹性项目在交叉轴上根据align-items属性的设置进行垂直对齐。
示例 2：垂直主轴（flex-direction: column;）

主轴是垂直的，从上到下。
交叉轴是水平的，从左到右。
弹性项目在主轴上垂直排列，占据主轴上的空间。
弹性项目在交叉轴上根据align-items属性的设置进行水平对齐。