Flex 布局详解与常用方法一、Flex 是什么FlexFlexible Box弹性盒子是 CSS3 提供的一种一维布局模型专门用于在容器中对项目进行排列、对齐和分配空间。一句话概括给父容器加上display: flex子元素就能灵活地排列和对齐。为什么要用 Flex在 Flex 出现之前网页布局靠floatposition缺点垂直居中困难多列等高麻烦顺序调整需改 HTMLFlex 解决了这些痛点是现代网页布局的首选方案。二、核心概念两个角色Flex 布局中只有两个角色┌─────────────────────────────────┐ │ Flex Container容器 │ ← 父元素display: flex │ ┌────┐ ┌────┐ ┌────┐ │ │ │项目1│ │项目2│ │项目3│ │ ← 子元素Flex Item │ └────┘ └────┘ └────┘ │ └─────────────────────────────────┘角色英文设置位置作用容器Container父元素统一管理子元素的排列方式项目Item子元素各自可以有自己的伸缩规则两条轴线理解 Flex 的关键主轴 (main axis) → 方向由 flex-direction 决定 ┌──────────────────────────────────────┐ │ ┌────┐ ┌────┐ ┌────┐ │ 交叉轴 │ │ │ │ │ │ │ │ ( cross │ │ │ │ │ │ │ │ axis) │ └────┘ └────┘ └────┘ │ │ │ └──────────────────────────────────────┘主轴main axis项目排列的方向默认水平交叉轴cross axis与主轴垂直的方向三、容器属性6 个常用1.flex-direction主轴方向决定项目沿着哪个方向排列。.container{display:flex;flex-direction:row;/* 默认水平从左到右 */flex-direction:row-reverse;/* 水平从右到左 */flex-direction:column;/* 垂直从上到下 */flex-direction:column-reverse;/* 垂直从下到上 */}2.justify-content主轴对齐控制项目在主轴方向的对齐与分布。.container{display:flex;justify-content:flex-start;/* 靠左默认 */justify-content:flex-end;/* 靠右 */justify-content:center;/* 居中 */justify-content:space-between;/* 两端对齐首尾贴边 */justify-content:space-around;/* 每个项目左右间距相等 */justify-content:space-evenly;/* 所有间距完全相等 */}可视化效果flex-start: [■][■][■] center: [■][■][■] space-between: [■] [■] [■] space-around: [■] [■] [■] space-evenly: [■] [■] [■]3.align-items交叉轴对齐控制项目在交叉轴方向单行的对齐方式。.container{display:flex;align-items:stretch;/* 拉伸填满默认 */align-items:flex-start;/* 顶部对齐 */align-items:flex-end;/* 底部对齐 */align-items:center;/* 垂直居中 */align-items:baseline;/* 文字基线对齐 */}最经典用法垂直水平双居中.center-box{display:flex;justify-content:center;/* 主轴居中 */align-items:center;/* 交叉轴居中 */}4.flex-wrap是否换行.container{display:flex;flex-wrap:nowrap;/* 不换行挤压项目默认 */flex-wrap:wrap;/* 换行 */flex-wrap:wrap-reverse;/* 反向换行 */}5.align-content多行交叉轴对齐当项目换行了多行控制行与行之间的分布。.container{display:flex;flex-wrap:wrap;align-content:flex-start;/* 多行靠顶部 */align-content:center;/* 多行整体居中 */align-content:stretch;/* 各行拉伸填满默认 */align-content:space-between;/* 行与行两端对齐 */}注意align-content只在多行时生效单行时用align-items。6.flex-flow方向 换行的简写.container{flex-flow:row wrap;/* 等同于 flex-direction: row; flex-wrap: wrap; */}四、项目属性5 个常用1.flex-grow放大比例当容器有剩余空间时项目如何分配多余空间。.item{flex-grow:0;/* 默认不放大 */flex-grow:1;/* 等分剩余空间 */}/* 三个项目第一个占 1 份第二个占 2 份第三个不放大 */.item1{flex-grow:1;}.item2{flex-grow:2;}.item3{flex-grow:0;}2.flex-shrink缩小比例当容器空间不足时项目如何缩小。.item{flex-shrink:1;/* 默认等比缩小 */flex-shrink:0;/* 不缩小 */}3.flex-basis项目基础大小.item{flex-basis:200px;/* 项目主轴方向初始大小为 200px */flex-basis:auto;/* 默认由内容决定 */}4.flex简写最常用.item{flex:1;/* 等同于 flex: 1 1 0% */flex:0 0 200px;/* 不放大不缩小固定 200px */flex:auto;/* 等同于 flex: 1 1 auto */flex:none;/* 等同于 flex: 0 0 auto */}常用取值写法含义场景flex: 1等比分占剩余空间自适应列flex: 0 0 200px固定 200px不伸缩固定宽度的侧栏flex: 2 1 0%放大比例 2某列占两倍空间5.order排列顺序.item1{order:2;}/* 排第二 */.item2{order:1;}/* 排第一数字越小越靠前 */.item3{order:3;}/* 排第三 */默认order: 0可以用负数。6.align-self单个项目的交叉轴对齐覆盖容器的align-items。.item2{align-self:center;/* 只有这个项目垂直居中 */}五、常用布局案例案例 1水平垂直居中最经典divclassbox居中文字/div.box{display:flex;justify-content:center;align-items:center;width:300px;height:200px;background:#2c7a4b;color:white;}案例 2导航栏navclassnavahref#首页/aahref#产品/aahref#新闻/aahref#stylemargin-left:auto;联系我们/a/nav.nav{display:flex;align-items:center;gap:20px;height:60px;padding:0 20px;background:#333;}.nav a{color:white;text-decoration:none;}技巧margin-left: auto可以把联系我们推到最右边。案例 3卡片网格自适应换行divclasscardsdivclasscard卡片1/divdivclasscard卡片2/divdivclasscard卡片3/divdivclasscard卡片4/div/div.cards{display:flex;flex-wrap:wrap;gap:15px;}.card{flex:1 1 200px;/* 最小 200px可伸缩 */height:120px;background:#e3f2e1;border-radius:8px;display:flex;align-items:center;justify-content:center;}案例 4左右分栏侧栏固定主内容自适应divclasslayoutasideclasssidebar侧边栏 200px/asidemainclassmain主内容自适应/main/div.layout{display:flex;gap:20px;}.sidebar{flex:0 0 200px;/* 固定 200px */background:#f0f0f0;}.main{flex:1;/* 占据剩余空间 */background:#e3f2e1;}案例 5图文并排divclassitemimgsrcimg/avatar.pngaltdivh3用户名/h3p个人简介文字.../p/div/div.item{display:flex;align-items:center;gap:15px;}.item img{width:60px;height:60px;border-radius:50%;}六、Flex 速查表容器属性属性常用值作用flex-directionrow/column主轴方向justify-contentcenter/space-between主轴对齐align-itemscenter/stretch交叉轴对齐flex-wrapwrap/nowrap是否换行align-contentcenter/stretch多行交叉轴对齐项目属性属性常用值作用flex1/0 0 200px伸缩简写flex-grow0/1/2放大比例flex-shrink0/1缩小比例flex-basis200px/auto基础大小order整数排列顺序align-selfcenter/flex-start单独对齐七、教学建议先画轴线讲 Flex 之前一定要在黑板上画出主轴和交叉轴学生才能理解justify-content和align-items的区别。动手演示在浏览器开发者工具中勾选/取消 Flex 属性让学生实时看到效果变化比纯理论更直观。从常用入手justify-content、align-items、flex这三个属性覆盖了 80% 的使用场景优先讲透。对比 float用垂直居中这个经典痛点做对比——float 需要 3 行 hackFlex 只需 1 行学生立刻能体会 Flex 的优势。