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 布局
把最外层包裹元素（比如 根据页面骨架选择主轴方向： 这两属性管的是子元素在主轴/交叉轴上的位置，常用组合： 对子元素使用 不复杂但容易忽略：Flex 是单向布局模型，一层 flex 容器解决一级结构；多层嵌套时，每层独立设置，别指望父容器直接控制孙元素。先定方向，再调对齐，最后分空间——三步下来，基础页面骨架就稳了。 或
display: flex 启用 Flex 模式flex-direction: row（从左到右），适合水平导航或侧边栏+内容组合flex-direction: column二、用 flex-direction 划分主区域方向
flex-direction: columnflex-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 容器里含长文本时）
