HTML中弹性盒模型在响应式布局的用法-html教程-PHP中文网

flexbox 本身不是响应式方案，但它是构建响应式布局最可靠的一维基础；真正起响应作用的是 flex-wrap、flex 缩写行为、媒体查询配合，以及对主轴/交叉轴方向的动态切换。

html中弹性盒模型在响应式布局的用法

Flexbox 本身不是响应式方案，但它是构建响应式布局最可靠的一维基础；真正起响应作用的是 flex-wrap、flex 缩写行为、媒体查询配合，以及对主轴/交叉轴方向的动态切换。

很多人以为 justify-content: center 总是“居中”，其实它只在主轴上生效。当容器设为 flex-direction: column，主轴变成垂直方向，justify-content 就控制上下对齐，align-items 才管左右。

错误写法：flex-direction: column; justify-content: center; → 所有子项在顶部垂直居中堆叠（不是水平居中）
正确写法：想让垂直排列的项目“水平居中”，必须加 align-items: center;
移动端常用组合：display: flex; flex-direction: column; align-items: center; 实现单列内容整体居中
注意：旧版 Safari（iOS 9–10）对 flex-direction: column 下的 align-items: stretch 渲染异常，建议显式设 align-items: flex-start 避免意外拉伸

卡片列表、功能模块格子在小屏上挤成一条或直接溢出？大概率是忘了设 flex-wrap: wrap。它默认就是 nowrap，死扛一行到底，不管容器多窄。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

flex-wrap: nowrap（默认）：所有子项强制单行，超宽则溢出或缩小（取决于 flex-shrink）
flex-wrap: wrap：子项自动换行，此时 align-content 才生效（控制行与行之间的对齐）
移动端两列卡片安全写法：display: flex; flex-wrap: wrap; + 每个子项 flex: 0 0 50%（注意不是 width: 50%，后者在某些 Android WebView 中失效）
避免用 width: 33.333% 做三列——小数精度和 margin 叠加易导致最后一项掉行，改用 flex: 0 0 calc(33.333% - 8px) 或 gap 更稳

flex 是 flex-grow、flex-shrink、flex-basis 的简写，顺序固定，省略部分按规则补默认值——而这些默认值常和直觉相反。

align-items 是容器级属性，作用于所有子项。想让第 3 个卡片顶对齐、其余居中？必须在那个子项上单独加 align-self: flex-start。

align-self 可取值与 align-items 相同：flex-start、center、flex-end、stretch 等
注意：如果子项设置了 align-self，它会覆盖容器的 align-items 设置，但仅限该子项
常见误用：align-items: center 后又给某个子项设 margin-top: auto —— 在 Flex 容器里，margin: auto 在交叉轴方向也有效，但优先级低于 align-self，行为不稳定，建议统一用 align-self
兼容性提醒：IE10–11 对 align-self 支持不全，需加 -ms-flex-item-align 前缀