css 之 Flexbox 的一生

Flexbox（弹性盒子布局）

是CSS3提供的一种一维布局模型，用于在单行或单列中排列项目，适合处理未知或动态尺寸的项目。

核心术语

Flex容器 ：设置了display:flex;或display:inline-flex 的元素。 Flex项目 ：Flex容器的直接子元素。主轴：项目排列的主要方向（由flex-direction决定） 交叉轴：与主轴垂直的方向

注意：主轴和交叉轴的方向会随着flex-direction的改变而变化。

容器属性

基础属性

css3 复制代码

.container {
    display:flex; /* 或者是inline-flex */
}

主轴方向控制（flex-direction）

css3 复制代码

.container {
    flex-direction: row; /* 默认值，水平排列（左→右）*/
    flex-direction: row-reverse; /* 水平方向（右→左）*/
    flex-direction: column; /* 垂直排列（上→下）*/
    flex-direction: column-reverse; /* 垂直排列（下→上）*/
}

换行控制（flex-wrap）

css3 复制代码

.container {
    flex-wrap: nowrap; /* 默认值，不换行 */
    flex-wrap: wrap; /* 正常换行 */
    flex-wrap: wrap-reverse; /* 反向换行 */
}

简单属性（flex-flow）

css3 复制代码

.container {
    flex-flow: row wrap; /* flex-direction 和 flex-wrap 的简写 */
}

主轴对齐（justify-content）

css3 复制代码

.container {
    justify-content: flex-start; /* 默认值，起始对齐 */
    justify-content: flex-end; /* 末尾对齐 */
    justify-content: center; /* 居中对齐 */
    justify-content: space-between; /* 两端对齐， 项目间 间隔相等 */
    justify-content: space-around; /* 每个项目两侧间隔相等 */
    justify-content: space-evenly; /* 所有间隔完全相等 */
}

交叉轴对齐（align-items）

css3 复制代码

.container {
    align-items: stretch; /* 默认值，拉伸填满容器高度 */
    align-items: flex-start; /* 起始对齐 */
    align-items: flex-end; /* 末尾对齐 */
    align=items: center; /* 居中对齐 */
    align-items: baseline; /* 基线对齐 */
}

多行对齐（align-content）

css3 复制代码

.container {
    align-content: stretch; /* 默认值，拉伸填满 */
    align-content: flex-start; /* 起始对齐 */
    align-content: flex-end; /* 末尾对齐 */
    align-content: center; /* 居中对齐 */
    align-content: space-between; /* 两端对齐 */
    align-content: space-around; /* 均匀分布 */
}

项目属性

排序控制（order）

css3 复制代码

.item {
    order: 0; /* 默认值，数值越大排列越后 */
}

伸缩比例（flex-grow）

css3 复制代码

.item {
    flex-grow: 0; /* 默认值，不放大 */
    flex-grow: 1; /* 按比例分配剩余空间 */
}

收缩比例（flex-shrink）

css3 复制代码

.item {
    flex-shrink: 1; /* 默认值，空间不足时缩小 */
    flex-shrink:0; /* 禁止缩小 */
}

初始尺寸（flex-basis）

css3 复制代码

.item {
    flex-basis: auto; /*默认值，基于内容或width */
    flex-basis: 200px; /* 固定尺寸 */
    flex-basis: 30%; /* 百分比尺寸 */
}

简单属性（flex）

css3 复制代码

.item {
    flex: none; /* 0 0 auto */
    flex: auto; /* 1 1 auto */
    flex: 1; /* 1 1 0% */
    flex: 0 0 20px; /* flex-grow flex-shrink flex-basis */
    flex: 2 1 30%； /* 组合使用 */
}

单独对齐（align-self）

css3 复制代码

.item {
    align-self: auto; /* 默认值， 继承父级*/
    align-self: flex-start; /* 起始对齐 */
    align-self: flex-end; /* 末尾对齐 */
    align-self: center; /* 居中对齐 */
    align-self: baseline; /* 基线对齐 */
    align-self: stretch; /* 拉伸填满 */
}

常见问题及解决方案

1、项目宽度超出容器

css3 复制代码

.container {
    min-width: 0; /* 修复min-width默认值问题 */
}

.item {
    overflow: hidden; /* 防止内容溢出 */
}

2、项目高度不一样

css3 复制代码

.container {
    align-items: stretch; /* 默认值即可 */
}

3、空白间距问题

css3 复制代码

.container {
    font-size: 0; /* 消除inline-block间隙 */
}

.container> * {
    font-size: 16px; /* 恢复字体大小 */
}

4、移动端距离适配

css3 复制代码

@media(max-width:768px) {
    .container {
        flex-direction: column;
    }
    
    .item {
        flex: 1 1 auto;
    }
}

实践经验

优先使用简写属性：flex 比 flex-grow\flex-shrink\flex-basis 更高效；

合理设置flex-basis：明确初始尺寸有助于布局稳定；

浏览器兼容性：旧版浏览器可能需要前缀；

结合其他布局方案，比如结合grid使用;

性能优化：避免过度嵌套flex容器。