Flex 布局弹性布局基础知识Flex 是 CSS3 中最常用、最强大的布局方式专门用来解决一维布局一行 / 一列的对齐、分布、自适应问题彻底告别传统的浮动、定位难题。一、核心概念容器给元素设置display: flex这个元素就是Flex 容器它的直接子元素自动成为Flex 项目。两根轴主轴默认水平向右项目排列的方向交叉轴默认垂直向下垂直于主轴所有布局属性要么给容器设置控制整体排列要么给项目设置控制单个项目。二、容器的 6 个核心属性必记1.display: flex开启 Flex 布局块级元素独占一行display: inline-flex行内弹性容器不独占一行。2.flex-direction主轴方向项目排列方向cssflex-direction: row; /* 默认水平从左到右 */ flex-direction: row-reverse; /* 水平从右到左 */ flex-direction: column; /* 垂直从上到下 */ flex-direction: column-reverse; /* 垂直从下到上 */3.flex-wrap是否换行cssflex-wrap: nowrap; /* 默认不换行项目挤在一行 */ flex-wrap: wrap; /* 自动换行第一行在上方 */ flex-wrap: wrap-reverse; /* 反向换行第一行在下方 */4.justify-content主轴对齐方式cssjustify-content: flex-start; /* 默认左对齐/上对齐 */ justify-content: flex-end; /* 右对齐/下对齐 */ justify-content: center; /* 居中 */ justify-content: space-between;/* 两端对齐项目之间等距 */ justify-content: space-around; /* 项目两侧等距 */ justify-content: space-evenly; /* 项目之间间距完全相等最常用 */5.align-items单行交叉轴对齐方式cssalign-items: flex-start; /* 交叉轴起点对齐 */ align-items: flex-end; /* 交叉轴终点对齐 */ align-items: center; /* 交叉轴居中 */ align-items: stretch; /* 默认项目拉伸占满容器高度 */ align-items: baseline; /* 项目第一行文字基线对齐 */6.align-content多行交叉轴对齐方式只有项目换行后才生效cssalign-content: flex-start; align-content: flex-end; align-content: center; align-content: space-between; align-content: space-around; align-content: stretch; /* 默认 */三、项目的 6 个核心属性给容器内的子元素设置控制单个项目1.flex最常用简写flex: 数字→ 项目的占比 / 拉伸比例cssflex: 1; /* 平分剩余空间自适应填满 */2.align-self单独控制某个项目的交叉轴对齐覆盖容器的align-itemscssalign-self: auto | flex-start | flex-end | center | baseline | stretch;3.order项目排列顺序数字越小越靠前默认 0cssorder: -1; /* 排到最前面 */4. 完整项目属性flex-grow放大比例默认 0不放大flex-shrink缩小比例默认 1空间不足会缩小flex-basis项目在主轴上的初始宽度 / 高度四、最实用的 3 个高频用法1. 水平垂直居中一行代码搞定css.container { display: flex; justify-content: center; /* 主轴居中 */ align-items: center; /* 交叉轴居中 */ }2. 子元素自动平分宽度css.container { display: flex; } .item { flex: 1; } /* 所有子元素宽度相等 */3. 两端对齐css.container { display: flex; justify-content: space-between; }五、快速记忆口诀父元素开flex子元素自动变项目主轴对齐用justify交叉轴对齐用align自适应填满写flex:1水平垂直居中justify align都设center总结Flex 是一维布局控制一行 / 一列的排列核心分容器属性控制整体和项目属性控制单个日常开发 90% 场景只用display:flex、justify-content、align-items、flex:1。第七题以及第九题