现代布局——Flexbox 弹性盒模型一维布局首选第一节Flexbox 核心概念1.1 为什么需要Flexbox传统布局浮动定位的痛点✅ 垂直居中需要复杂的计算✅ 元素无法自动均分剩余空间✅ 换行需要额外处理Flexbox的核心优势✅ 一维布局行/列的“终极解决方案”✅ 轻松实现居中、均分、自适应✅ 代码简洁无兼容性问题IE10支持。1.2 Flexbox 核心术语Flex容器设置display: flex的元素父元素Flex项目Flex容器的直接子元素主轴项目排列的方向默认水平从左到右交叉轴与主轴垂直的方向默认垂直从上到下主轴方向控制flex-direction: row | row-reverse | column | column-reverse。第二节Flex容器的核心属性属性作用常用取值display转为Flex容器flex块级/ inline-flex行内块flex-direction控制主轴方向row默认/ column / row-reverse / column-reversejustify-content主轴对齐方式flex-start / center / space-between / space-around / space-evenlyalign-items交叉轴对齐方式stretch默认/ center / flex-start / flex-end / baselineflex-wrap项目是否换行nowrap默认/ wrap / wrap-reversealign-content多轴对齐仅wrap生效flex-start / center / space-between / stretch2.1 核心实战1元素水平垂直居中最简方案HTMLdiv classcenter-boxdiv classcenter-item我是居中的元素/div/divstyle.center-box {width: 300px;height: 200px;border: 1px solid #eee;display: flex; /* 关键1转为Flex容器 */justify-content: center; /* 关键2主轴居中 */align-items: center; /* 关键3交叉轴居中 */}.center-item {padding: 10px 20px;background-color: #e3f2fd;}/style2.2 核心实战2导航栏布局空间均分HTMLnav classflex-nava href# classnav-item首页/aa href# classnav-item课程/aa href# classnav-item学习路径/aa href# classnav-item关于我们/a/navstyle.flex-nav {display: flex;justify-content: space-around; /* 项目均匀分布 */background-color: #2196f3;padding: 15px 0;}.nav-item {color: #fff;text-decoration: none;padding: 5px 10px;border-radius: 4px;transition: background 0.2s;}.nav-item:hover {background-color: #1976d2;}/style2.3 核心实战3自适应布局侧边栏固定主内容自适应HTMLdiv classflex-containeraside classsidebar侧边栏200px/asidemain classmain主内容自动填充/main/divstyle.flex-container {display: flex;height: 400px;border: 1px solid #eee;}.sidebar {width: 200px;background-color: #e3f2fd;padding: 10px;}.main {flex: 1; /* 关键自动填充剩余空间 */background-color: #f5f5f5;padding: 10px;}/style第三节Flex项目的核心属性属性作用常用取值flex-grow项目放大比例0默认不放大/ 1 / 2...flex-shrink项目缩小比例1默认允许缩小/ 0不缩小flex-basis项目初始尺寸auto默认/ 100px / 50%flex复合属性flex: 1等价于1 1 0%/ none0 0 autoalign-self单个项目交叉轴对齐覆盖容器的align-items取值相同3.1 实战项目按比例分配空间HTMLdiv classflex-boxdiv classitem item11份/divdiv classitem item22份/divdiv classitem item33份/div/divstyle.flex-box {display: flex;width: 600px;height: 100px;border: 1px solid #eee;}.item {line-height: 100px;text-align: center;color: #fff;}.item1 { flex: 1; background-color: #2196f3; }.item2 { flex: 2; background-color: #ff4444; }.item3 { flex: 3; background-color: #00c851; }/style第四节课堂练习与答疑用Flex实现“商品列表”每行显示4个卡片自适应宽度换行用Flex实现“表单布局”标签左对齐输入框占剩余空间答疑解决“Flex项目换行后间距异常”“flex:1不生效”等问题。