检查容器和项目属性确保父元素设置 display: flex检查 flex-direction (默认row)检查 flex-wrap (默认nowrap)常用调试工具浏览器开发者工具使用边框高亮：* { border: 1px solid red; }常见问题示例关键属性调试justify-content (主轴对齐)align-items (交叉轴对齐)flex-grow/shrink/bas
align-items: flex-start 作用：将弹性子元素沿交叉轴的起点对齐。示例： 效果：所有子元素顶部对齐。align-items: flex-end 作用：将弹性子元素沿交叉轴的终点对齐。示例： 效果：所有子元素底部对齐。用法：适用于弹性容器（display: flex 或 display: inline-flex）。控制子元素在交叉轴（默认垂直轴）的对齐方式。其他值：center（
justify-content: flex-start 作用：将子元素对齐到容器起始位置（左/上）。示例： 效果：子元素紧贴容器左侧（默认方向）。justify-content: flex-end 作用：将子元素对齐到容器末尾位置（右/下）。示例： 效果：子元素紧贴容器右侧。注意：需配合display: flex使用，方向受flex-direction影响（如column时对齐顶部/底部）。
flex-direction: row默认值：子元素水平排列，从左到右。示例：效果：Item 1、Item 2、Item 3 从左到右水平排列。用法：适用于需要水平布局的场景（如导航栏、按钮组）。与 justify-content 和 align-items 配合控制对齐方式。flex-direction: column作用：子元素垂直排列，从上到下。示例：效果：Item 1、Item 2、Ite
flex-direction: row/column 示例HTML:CSS:用法flex-direction: row: 子元素水平排列（默认值）flex-direction: column: 子元素垂直排列可配合 flex-wrap, justify-content, align-items 使用安装不需要安装，是CSS原生属性，直接在现代浏览器中使用。
display: flex/inline-flex 示例、用法、安装1. 示例Flex 示例:Inline-Flex 示例:2. 用法Flex：块级弹性容器，独占一行。Inline-Flex：行内弹性容器，与其他行内元素共处一行。常用属性：justify-content：主轴对齐方式（如 flex-start, center, space-between）。align-items：交叉轴对齐方式（
display: flex/inline-flex 示例、用法、安装1. 示例2. 用法flex: 块级弹性容器，独占一行inline-flex: 行内弹性容器，与其他元素共享一行常用属性：3. 安装不需要安装，Flexbox 是 CSS3 原生支持的功能，现代浏览器均内置支持。只需在 CSS 中直接使用即可。浏览器支持：所有现代浏览器（Chrome、Firefox、Safari、Edge）IE1
CSS中div居中的方法水平居中1. 使用margin: auto2. 使用text-align (适用于内联元素)3. 使用flexbox垂直居中1. 使用line-height (适用于单行文本)2. 使用padding3. 使用flexbox水平和垂直同时居中1. 使用绝对定位和transform2. 使用flexbox3. 使用grid布局完整示例
