Flex布局三步搭建页面结构：先设display:flex启用，再用flex-direction定主轴方向，最后用justify-content和align-items控制对齐及flex分配空间。
用 Flex 快速搭页面基础结构，核心是把容器设为 display: flex，再通过 flex-direction、justify-content 和 align-items 三招控制主轴和交叉轴的排列，不用浮动、不用绝对定位，几行 CSS 就能理清 header / main / sidebar / footer 的关系。
一、设定容器为 flex 布局
把最外层包裹元素（比如 或 <div class="layout">）设为 flex 容器：
<ul>
<li><font color="#2c3e50">加 <code>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 容器解决一级结构；多层嵌套时，每层独立设置，别指望父容器直接控制孙元素。先定方向，再调对齐，最后分空间——三步下来，基础页面骨架就稳了。
