CSS弹性盒子布局（Flexbox）详解

一、弹性盒子概述1.1 基本概念弹性盒子Flexbox​ 是CSS3中引入的一种布局手段主要用于代替浮动完成页面布局。特性说明核心优势使元素具有弹性可根据页面大小自动调整相比浮动更灵活无高度塌陷问题兼容性CSS3新增特性适用于IE10版本浏览器1.2 开启弹性盒子display: flex; /* 块级弹性容器 */ display: inline-flex; /* 行内弹性容器 */1.3 相关概念术语说明弹性容器​设置了display: flex的元素弹性元素​弹性容器的直接子元素​注意一个元素可以同时是弹性容器和弹性元素即嵌套使用。二、弹性容器属性2.1 flex-direction — 主轴方向控制作用指定容器中弹性元素的排列方式即主轴方向。值描述主轴方向row默认值水平排列左→右自左向右row-reverse反向水平排列右→左自右向左column纵向排列上→下自上向下column-reverse反向纵向排列下→上自下向上.container { display: flex; flex-direction: row; /* 水平排列默认 */ flex-direction: column; /* 垂直排列 */ }2.2 justify-content — 主轴排列方式作用控制弹性元素在主轴上的排列方式。值描述flex-start默认值沿主轴起点排列flex-end沿主轴终点排列center沿主轴居中排列space-between两端对齐排列两端无空隙中间均匀分布space-around空白间距平均分布在弹性元素两侧space-evenly所有间距完全相等.container { justify-content: center; /* 居中 */ justify-content: space-between; /* 两端对齐 */ justify-content: space-around; /* 两侧等距 */ }2.3 align-items — 侧轴单行排列作用控制单行弹性元素在侧轴上的排列方式。值描述stretch默认值拉伸填充元素未设高度时flex-start沿侧轴起点排列flex-end沿侧轴终点排列center沿侧轴居中排列baseline沿基线对齐.container { align-items: center; /* 垂直居中 */ align-items: stretch; /* 拉伸填满 */ }2.4 flex-wrap — 换行控制作用控制弹性元素是否换行。值描述nowrap默认值不换行元素可能会被压缩wrap换行wrap-reverse换行 反转排列顺序.container { flex-wrap: wrap; /* 允许换行 */ }2.5 align-content — 侧轴多行排列作用控制多行弹性元素在侧轴上的排列方式需配合flex-wrap: wrap使用。值描述stretch默认值拉伸填满flex-start沿侧轴起点排列flex-end沿侧轴终点排列center沿侧轴居中排列space-between两端对齐排列space-around空白间距平均分布在弹性元素两侧.container { flex-wrap: wrap; align-content: center; /* 多行居中 */ align-content: space-between; /* 多行两端对齐 */ }2.6 flex-flow — 简写属性作用flex-direction和flex-wrap的简写。flex-flow: flex-direction flex-wrap; /* 示例 */ flex-flow: row wrap; /* 水平排列 允许换行 */ flex-flow: column nowrap; /* 垂直排列 不换行 */三、弹性元素属性3.1 order — 排列顺序作用定义弹性元素的排列顺序。属性说明默认值0规则数值越小排列越靠前.item1 { order: 3; } /* 排在后面 */ .item2 { order: 1; } /* 排在前面 */ .item3 { order: 2; } /* 排在中间 */3.2 flex-grow — 放大比例作用定义弹性元素的放大比例。属性说明默认值0即使有剩余空间也不放大规则按比例分配剩余空间.item1 { flex-grow: 1; } /* 占1份 */ .item2 { flex-grow: 2; } /* 占2份比item1多占一倍 */3.3 flex-shrink — 缩小比例作用定义弹性元素的缩小比例。属性说明默认值1空间不足时按比例缩小规则值越大缩小幅度越大.item1 { flex-shrink: 0; } /* 不缩小 */ .item2 { flex-shrink: 2; } /* 缩小幅度是默认的2倍 */3.4 flex-basis — 基准大小作用定义在分配多余空间之前弹性元素占据的主轴空间。属性说明默认值auto元素的本来大小取值像素值、百分比等.item { flex-basis: 200px; /* 主轴方向上的初始大小为200px */ }3.5 flex — 简写属性作用flex-grow、flex-shrink、flex-basis的简写。flex: flex-grow flex-shrink flex-basis; /* 默认值 */ flex: 0 1 auto; /* 常用写法 */ flex: 1; /* flex: 1 1 0%等分剩余空间 */ flex: none; /* flex: 0 0 auto固定大小 */ flex: auto; /* flex: 1 1 auto自动适应 */3.6 align-self — 单独对齐作用允许单个弹性元素拥有与其他元素不同的对齐方式覆盖父元素的align-items属性。值说明auto默认值继承父元素的align-itemsflex-start侧轴起点对齐flex-end侧轴终点对齐center侧轴居中对齐stretch拉伸填满baseline基线对齐.container { align-items: flex-start; /* 其他元素顶部对齐 */ } .special-item { align-self: center; /* 该元素单独居中对齐 */ }四、完整示例代码4.1 HTML结构ul li1/li li2/li li3/li li4/li li5/li /ul4.2 CSS样式/* 基础重置 */ * { margin: 0; padding: 0; list-style: none; } /* 弹性容器 */ ul { width: 500px; height: 500px; border: 10px solid red; margin: 10px auto; /* 开启弹性盒子 */ display: flex; flex-direction: row; /* 水平排列 */ justify-content: center; /* 主轴居中 */ align-items: center; /* 侧轴居中 */ flex-wrap: wrap; /* 允许换行 */ } /* 弹性元素 */ li { width: 100px; height: 100px; background-color: #bfa; font-size: 50px; line-height: 100px; text-align: center; }五、核心概念总结5.1 主轴与侧轴轴说明主轴​弹性元素的排列方向由flex-direction决定侧轴​与主轴垂直的方向5.2 布局逻辑第一步确定主轴方向flex-direction 第二步控制主轴排列justify-content 第三步控制侧轴排列align-items / align-content 第四步处理溢出换行flex-wrap5.3 实用技巧技巧说明水平垂直居中justify-content: centeralign-items: center等分空间所有子元素设置flex: 1固定自适应固定元素不加flex自适应元素设置flex: 1排序调整使用order属性调整显示顺序不改变HTML结构个别元素特殊对齐使用align-self覆盖父容器的align-items简写属性使用flex-flow简化flex-directionflex-wrap六、常见问题解答Q1Flexbox 和浮动有什么区别对比项Flexbox浮动float高度塌陷无此问题需要清除浮动对齐方式灵活多样有限响应式天然支持需要额外处理使用难度简单较复杂Q2什么时候用align-items什么时候用align-content单行时用align-items多行时配合flex-wrap: wrap用align-contentQ3flex: 1是什么意思等同于flex: 1 1 0%表示flex-grow: 1可放大flex-shrink: 1可缩小flex-basis: 0%初始大小为0公平分配空间七、总结本文详细介绍了CSS弹性盒子布局的完整知识体系基本概念弹性容器、弹性元素、主轴与侧轴容器属性flex-direction、justify-content、align-items、flex-wrap、align-content、flex-flow元素属性order、flex-grow、flex-shrink、flex-basis、flex、align-self实战技巧水平垂直居中、等分空间、固定自适应布局掌握Flexbox布局后你将能够轻松应对绝大多数页面布局需求告别浮动带来的各种问题。