前端CSS精讲04：Flex弹性布局零基础吃透，一键搞定所有自适应居中

文章目录一、什么是 Flex 布局二、父容器常用六大核心属性1. display: flex2. flex-direction 设置主轴方向3. justify-content 主轴对齐（水平常用）4. align-items 侧轴对齐（垂直常用，单行）5. flex-wrap 控制是否换行6. align-content 多行侧轴对齐三、子项目常用核心属性1. flex-grow 瓜分剩余空间2. flex-shrink 空间不足是否缩小3. flex 简写（企业最常用）4. align-self 单独控制某个子元素对齐四、万能水平垂直居中（面试必背）五、实战经典等分布局示例六、Flex 开发避坑要点七、本节小结大家好，我是代码搬运董，软件专业在读、前端预备攻城狮，专注用通俗的话拆解硬核前端知识。前面我们搞定了盒模型、margin塌陷、选择器优先级，解决了基础样式疑难问题。传统标准流布局做水平垂直居中、等分排列特别麻烦，Flex布局是现代前端首选布局方案，简单几行代码就能轻松实现居中、等分、自适应，面试和项目刚需必备。一、什么是 Flex 布局Flex 全称弹性盒模型，只要给父元素设置display: flex，内部子元素就会自动变成弹性项目。彻底脱离标准文档流，轻松控制排列方向、对齐方式、分配剩余空间。核心概念容器：设置了display:flex的父盒子项目：容器里面的每一个子元素主轴：子元素默认排列方向（默认水平向右）侧轴：和主轴垂直的方向（默认垂直向下）二、父容器常用六大核心属性1. display: flex开启弹性布局，子元素默认一行排列.flex-box{