6月22日

弹性布局（Flex 布局）通俗易懂讲解

1. 是什么
   Flex 弹性布局：CSS3 推出的一维布局模型，轻松实现水平、垂直居中、均分、自适应排列，代替浮动、定位，做页面排版超级方便。
2. 开启方式
   给父盒子加：
   display: flex;
   父盒子 = 容器，里面子元素 = 项目
3. 两大核心轴
   主轴：默认水平左右（x 轴）
   控制排列方向、水平对齐
   交叉轴：默认垂直上下（y 轴）
   控制垂直对齐
4. 常用核心属性
   一、父容器属性
   flex-direction 主轴方向
   row 默认：水平从左到右
   column：垂直从上到下
   justify-content 主轴对齐（水平对齐）
   flex-start 左对齐
   flex-end 右对齐
   center 居中
   space-between 两端均分
   space-around 两边留白均分
   align-items 交叉轴对齐（垂直对齐，单行）
   就是你刚才学的5 种对齐方式
   flex-start 顶部
   flex-end 底部
   center 垂直居中
   baseline 文字基线
   stretch 默认拉伸填满
   flex-wrap 自动换行
   nowrap 默认不换行
   wrap 自动换行
   二、子元素属性
   flex: 1 平分剩余空间（最常用）
   align-self 单独修改某个子元素垂直对齐
5. 最大优点
   轻松一键居中
   自适应屏幕，移动端首选
   不用浮动，清除浮动麻烦全没了
   排版简单、代码少、兼容性好
6. 最简单一句话总结
   给父盒子加 display:flex，子元素自动变成弹性项目，随便横竖排列、居中、均分布局。