Flex弹性布局（现代主流布局完全指南）

Flex弹性布局（现代主流布局完全指南）
Flex弹性布局是现代前端首选布局方案，彻底替代传统浮动布局，解决了浮动塌陷、布局不稳定、适配困难、居中复杂等所有痛点，适配PC端、移动端、响应式页面，是企业开发必掌握的核心技能。Flex布局分为弹性容器（父元素）和弹性项目（子元素），只需给父元素设置display: flex，内部所有子元素自动成为弹性项目，开启弹性布局规则。

Flex布局核心轴线概念：主轴和侧轴（交叉轴）。默认情况下，主轴为水平方向（从左到右），侧轴为垂直方向（从上到下）；可通过flex-direction修改主轴方向，改变元素排列方向。所有Flex布局属性，都是围绕主轴和侧轴的对齐、排列、缩放规则生效。

弹性容器（父元素）核心属性：1、flex-direction：设置主轴方向，row默认水平横向排列，column垂直纵向排列，可实现横向、纵向布局切换。2、justify-content：主轴对齐方式，flex-start左对齐、flex-end右对齐、center居中对齐、space-between两端均分、space-around均匀留白，快速实现多元素均分布局。3、align-items：侧轴对齐方式，实现垂直居中、顶部对齐、底部对齐，center是最常用的垂直居中属性。4、flex-wrap：默认子元素会压缩挤在一行，设置wrap可自动换行，解决元素溢出问题。

弹性项目（子元素）核心属性：1、flex：简写属性，用于平分父容器剩余空间，多个子元素设置不同flex值，可实现比例均分布局。2、flex-grow：放大比例，默认0不放大，数值越大分配剩余空间越多。3、flex-shrink：缩小比例，控制元素空间不足时的压缩程度。4、align-self：单独控制单个子元素的侧轴对齐方式，突破父容器统一规则，实现个性化布局。5、order：控制子元素排列顺序，数值越小越靠前，无需修改HTML结构即可调整展示顺序。

Flex万能居中公式（高频面试+实战）：父元素同时设置 justify-content: center（水平居中） + align-items: center（垂直居中），一键实现任意元素、任意尺寸的完全居中，比传统margin居中、定位居中更简单稳定。Flex布局优势：无文档流塌陷、代码简洁、自适应能力强、适配所有屏幕、支持比例均分、居中简单，是目前页面并排布局、自适应布局的最优解。

Flex布局是移动端、自适应布局首选，替代传统浮动，简单无塌陷问题。开启方式：给父容器设置display:flex，子元素自动变为弹性项目。

父容器常用属性：justify-content主轴对齐（水平居中、两端对齐）、align-items侧轴对齐（垂直居中）、flex-wrap自动换行。子元素属性：flex平分剩余空间、flex-grow放大比例、flex-shrink缩小比例。一键居中神器：justify-content:center + align-items:center。