弹性盒子

一、弹性盒子一般命名
父元素：弹性容器（flex container）
子元素：弹性项目（flex item）
只要父元素设置 display: flex ，所有直系子元素自动变成弹性项目。
二、开启弹性布局

给父容器开启弹性
特点

1. 子元素默认横向排列
2. 子元素默认不换行，自动压缩
3. 行内块、块级标签全部失去原有特性，统一弹性排布
   三、弹性盒子核心：主轴 & 侧轴
   Flex 布局永远存在两条轴：主轴、交叉轴（侧轴）
   默认状态
   主轴：水平从左 → 右
   侧轴：垂直从上 → 下
   轴的规则
4. 元素永远沿着主轴排列
5. 对齐方式分为：主轴对齐、侧轴对齐
6. 可通过 flex-direction 修改主轴方向
   四、父容器常用六大属性
   flex-direction 【设置主轴方向】
   (部分借鉴AI，整理所得）
   控制子元素排列方向
   flex-wrap 【是否自动换行】
   默认所有子元素挤在一行，不会自动换行
   justify-content 【主轴对齐方式】
   控制子元素在主轴上的对齐与均分
   align-items 【单行侧轴对齐】
   子元素只有一行时，控制垂直对齐
   align-content 【多行侧轴对齐】
   子元素必须换行（多行）才生效
   用于控制多行整体在侧轴的排布
   flex-flow 【复合简写】
   同时设置 方向 + 换行
   五、子元素（flex-item）常用属性
   flex 【占比权重，核心】
   控制子元素剩余空间分配比例
   语法： flex: 数值;
   经典场景：左右固定，中间自适应
   align-self 【单独修改单个项目垂直对齐】
   可以让某个子元素不和别人统一对齐
   order 【排序】
   控制子元素排列顺序，数值越小越靠前
   默认 order:0
   flex-shrink / flex-grow
   flex-grow ：剩余空间放大比例（默认0不放大）
   flex-shrink ：空间不足缩小比例（默认1会缩小）
   常开发直接用 flex: n 即可
   六、高频万能居中代码
   弹性盒子一键水平垂直居中
   七、Flex 布局总结口诀
7. 父加 flex，子变弹性
8. direction 改主轴，wrap 管换行
9. justify 管主轴，align 管侧轴
10. 单行看 items，多行看 content
11. flex 做自适应，一键居中最常用
    八、极简综合案例
    .box {
    width: 500px;
    height: 300px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    border: 1px solid #ccc;
    }
    .box div {
    width: 100px;
    height: 100px;
    background: skyblue;