Flex布局快速搭建页面结构技巧

• 加 display: flex 启用 Flex 模式
• 默认 flex-direction: row（从左到右），适合水平导航或侧边栏+内容组合
• 垂直布局（如页头+主体+页脚）则改用 flex-direction: column

二、用 flex-direction 划分主区域方向

根据页面骨架选择主轴方向：

• 顶部导航 + 中间内容 + 底部版权 → flex-direction: column
• 左侧菜单 + 主内容区 → flex-direction: row，再给菜单设固定宽（如 width: 240px），主内容用 flex: 1 自适应剩余空间
• 移动端需响应式时，可用 @media 切换 direction，比如小屏下 column 堆叠，大屏下 row 并排

三、用 justify-content 和 align-items 对齐内容

这两属性管的是子元素在主轴/交叉轴上的位置，常用组合：

• justify-content: space-between：首尾贴边，中间等距（适合导航链接分布）
• justify-content: center：主轴居中（如 banner 文字水平居中）
• align-items: center：交叉轴居中（配合 column 时让整页内容垂直居中）
• 注意：若子元素高度不一致，align-items: stretch（默认）会让它们拉满容器高；想取消就设 align-items: flex-start

四、灵活分配空间：flex 属性实战

对子元素使用 flex 简写，快速控制占比与伸缩行为：

• flex: 0 0 auto：不伸缩、不压缩、按自身尺寸（适合 logo、固定按钮）
• flex: 1：等比占满剩余空间（适合 main 区域）
• flex: 2 和 flex: 1 并存 → 2:1 分配（如 sidebar:main = 1:3，可设 flex: 1 和 flex: 3）
• 加 min-width: 0 防止文字溢出（尤其 flex 容器里含长文本时）

不复杂但容易忽略：Flex 是单向布局模型，一层 flex 容器解决一级结构；多层嵌套时，每层独立设置，别指望父容器直接控制孙元素。先定方向，再调对齐，最后分空间——三步下来，基础页面骨架就稳了。

到这里，我们也就讲完了《Flex布局快速搭建页面结构技巧》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！