弹性布局

弹性布局

一、基础概念

\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. 等分多列布局