弹性布局知识点

一、基础概念

1. 开启弹性布局的元素叫弹性容器，容器内直接子元素叫弹性项。

2. 弹性布局分为两条轴：主轴、侧轴。

3. 默认主轴水平向右，侧轴垂直向下；修改主轴方向会同步改变侧轴。

二、容器属性（写在父元素）

1. display

flex：块级弹性容器，独占一行

inline-flex：行内弹性容器，同行显示

2. flex-direction 控制主轴方向

水平正向、水平反向、垂直正向、垂直反向
3. flex-wrap 控制子元素是否换行

不换行：空间不足自动压缩子元素宽度

正常换行：空间不够自动换到下一行

反向换行：换行后颠倒上下行顺序

4. flex-flow
   direction与wrap两个属性的合并简写

5. justify-content 主轴对齐方式

靠起点对齐、靠终点对齐、居中对齐

两端对齐，中间均分空白

每个元素两侧空隙相等

所有空隙完全均等

6. align-items 单行侧轴对齐

默认拉伸填满高度、起点对齐、终点对齐、居中、文字基线对齐
7. align-content 多行侧轴整体分布
仅开启换行后生效，控制多行整体上下分布，取值和justify-content一致

三、弹性项属性（写在子元素）

1. flex-grow 放大比例
   剩余空间分配权重，默认0，不自动拓宽；数值越大分得空间越多

2. flex-shrink 缩小比例
   空间不足时压缩权重，默认1可缩小；设为0禁止压缩

3. flex-basis 元素基础尺寸
   优先级高于宽高，定义元素初始占据空间，默认auto

4. flex 三合一简写
   常用简写：flex:1 均分剩余空间；flex:none 固定尺寸不缩放

5. align-self
   单独修改单个弹性项的侧轴对齐，覆盖父容器align-items设置

6. order
   改变弹性项排列顺序，数值越小位置越靠前，支持正负数字

四、高频实用特性

1. 快速实现元素水平+垂直居中

2. 两栏布局：一侧固定宽度，另一侧自适应填满剩余空间

3. 导航栏左右分开布局

4. 卡片自动换行响应式排列

5. 页面底部永久贴底

6. 等分多列布局