• flex-wrap: wrap/nowrap详细说明

    2025-04-15 15

    flex-wrap 控制 flex 容器内项目的换行行为。属性值:nowrap(默认):不换行,所有项目排在一行。wrap:项目按需换行,从上到下排列。wrap-reverse:项目按需换行,从下到上排列。示例:用法:nowrap所有项目挤在一行,可能溢出容器。效果:三个 100px 宽的项目挤在 200px 容器内,溢出。wrap项目自动换行,避免溢出。效果:前两项目在第一行,第三项目换到第二行

  • align-items: flex-start/end详细说明

    2025-04-15 16

    align-items: flex-start 作用:将弹性子元素沿交叉轴的起点对齐。示例: 效果:所有子元素顶部对齐。align-items: flex-end 作用:将弹性子元素沿交叉轴的终点对齐。示例: 效果:所有子元素底部对齐。用法:适用于弹性容器(display: flex 或 display: inline-flex)。控制子元素在交叉轴(默认垂直轴)的对齐方式。其他值:center(