HTML中Flexbox弹性布局的所有属性与常见布局实例-html教程-PHP中文网

flexbox需容器与项目属性协同生效：flex-direction决定主轴方向，justify-content和align-items分别控制主轴与交叉轴对齐；flex-wrap默认nowrap需显式设wrap才换行；flex是三值缩写，顺序固定且隐式值易错；单项目对齐须用align-self而非align-items。

html中flexbox弹性布局的所有属性与常见布局实例

Flexbox 不是“加个 display: flex 就完事”的布局工具，它依赖容器与项目属性的协同生效；漏掉 flex-direction 判断主轴、误用 align-items 替代单项目居中、或把 flex: 1 和 flex: auto 混用，都会导致布局错位、溢出或卡顿。

flex-direction 决定 justify-content 和 align-items 的行为逻辑

这两个对齐属性不表示“水平”或“垂直”，而分别对应主轴和交叉轴——主轴方向变了，它们的作用就翻转。比如：

flex-direction: row（默认）：主轴水平 → justify-content 控左右，align-items 控上下
flex-direction: column：主轴垂直 → justify-content 控上下，align-items 控左右

常见错误：在 column 布局下仍写 justify-content: center 试图“水平居中”，实际是让所有项目在顶部堆叠居中。正确做法是改用 align-items: center 才能实现真正的水平居中。

flex-wrap 默认不换行，nowrap 下子项会强行压缩或溢出

很多人以为内容超宽就会自动折行，但 flex-wrap 默认值是 nowrap，所有项目死扛在一行，哪怕被压成 1px 宽或跑出视口。只有显式设为 wrap 或 wrap-reverse，换行才生效，此时 align-content 才起作用。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

需要两行卡片？必须写 flex-wrap: wrap
移动端小屏想单列？别只靠媒体查询改 width，配合 flex-wrap: wrap + flex: 0 0 100% 更稳
旧版 Android WebView 对 width: 50% + flex-wrap 渲染异常，优先用 flex: 0 0 50%

flex 是 shorthand，三个参数顺序固定且隐式值易踩坑

flex 等价于 flex-grow flex-shrink flex-basis，顺序不能错，省略时按规则补默认值。最常误写的有：

flex: 1 → 实为 flex: 1 1 0：从 0 开始均分空间，忽略内容宽度
flex: 1 0 → 解析为 flex: 1 0 0：放大但禁止收缩，小屏易溢出
flex: auto → flex: 1 1 auto：先按内容占位，再分剩余空间，文字多的项会撑宽整行
安全起点：想保持原始尺寸又不放大缩小，用 flex: 0 0 auto

等宽卡片布局必须用 flex: 1 或显式 flex-basis: 0，否则带 width 的子项会让 flex: 1 失效——得先清掉 width。

align-items 无法单独控制某个子项，align-self 才是关键

align-items 是容器级属性，作用于所有项目；想让第 3 个子项在交叉轴上顶对齐，其他居中？align-items 无能为力。

单个项目特殊对齐，必须在该项目上设 align-self: flex-start（或 center/flex-end）
align-self 可覆盖 align-items，但仅对自身生效
注意：它只在交叉轴起作用，主轴方向的偏移得靠 margin-left 或 margin-right（margin: auto 在 flex 项目中可触发主轴居中）