无需登录 数据私有 本地保存

CSS Flexbox交互演示 - 在线弹性布局学习

13
0
0
0
Flexbox 控制台
容器属性
8px
快速预设
子元素设置
生成的CSS
实时预览 5个子元素
⬌ 主轴 (Main Axis)
⬍ 交叉轴 (Cross Axis)

Flexbox 常见问题与知识点

Flexbox（Flexible Box Layout）是CSS3中的一维布局模型，专为在容器中沿主轴方向分配空间和对齐内容而设计。相比于传统的浮动（float）和定位（position），Flexbox能更优雅地处理动态尺寸、对齐和分布，特别适合组件级别的布局，如导航栏、卡片列表、居中对齐等场景。它是现代CSS布局的基石之一，与Grid布局互补——Flexbox擅长一维排列，Grid擅长二维网格。

主轴由flex-direction决定：row时主轴水平向右，column时主轴垂直向下。justify-content始终沿主轴对齐，align-items始终沿交叉轴对齐。理解这两个轴是掌握Flexbox的关键——记住：justify=主轴，align=交叉轴。当flex-direction改变时，两个轴的角色互换。

align-items设置单行内所有子元素在交叉轴上的对齐方式；align-content仅在多行（flex-wrap为wrap/wrap-reverse）时生效，控制行与行之间的间距分布。如果只有一行，align-content不产生任何效果。简单记忆：items管单行内的对齐，content管多行之间的分布。

这三个属性定义了子元素的弹性伸缩行为：flex-grow（默认0）决定元素如何分配剩余空间，值越大分得越多；flex-shrink（默认1）决定空间不足时如何收缩，0表示不收缩；flex-basis（默认auto）定义元素在分配空间前的初始尺寸。常用简写flex: 1 1 auto表示可增长可收缩。

使用display:flex; justify-content:center; align-items:center;即可在容器内水平和垂直居中子元素。这是Flexbox最经典的用例之一，比传统的margin:auto加line-height方案简洁得多，且适用于任意数量的子元素。

Flexbox适合一维布局（单行或单列的元素排列），如导航菜单、工具栏、卡片横向排列；Grid适合二维布局（同时控制行和列），如页面整体布局、仪表盘、杂志排版。实际开发中两者常结合使用：页面级用Grid，组件级用Flexbox。

gap（原名grid-gap）在现代浏览器中已全面支持Flexbox，用于设置子元素之间的间距，比使用margin更简洁且不会产生多余的边距。可使用gap统一设置，也可分别用row-gap和column-gap设置。兼容性方面，Chrome 84+、Firefox 63+、Safari 14.1+均支持。

flex-wrap控制子元素是否换行。默认nowrap下所有元素挤在一行，可能溢出；设为wrap后，超出容器宽度的元素会自动换到下一行，配合align-content可控制多行间距。wrap-reverse则反向换行（从下往上排列）。响应式布局中wrap非常实用。

Flexbox在现代浏览器中支持率超过99%，包括Chrome、Firefox、Safari、Edge。IE11存在部分bug（如flex-basis和min-height问题），但IE已基本退出市场。对于需要兼容极旧浏览器的项目，可使用@supports检测或提供float降级方案。gap属性在Flexbox中的支持稍晚，但当前主流浏览器均已支持。

设置body为display:flex; flex-direction:column; min-height:100vh;，主内容区设置flex:1，即可让页脚始终位于页面底部（内容少时）或被内容推到底部（内容多时）。这是经典的"Sticky Footer"解决方案，比传统方案更简洁可靠。
🔧 相关工具