align-self: auto作用:继承父容器的 align-items 值。示例:效果:子项垂直居中(与父容器 align-items 一致)。align-self: stretch作用:拉伸子项以填满交叉轴方向的空间(高度/宽度)。示例:效果:子项高度变为 200px(与父容器等高)。关键区别auto:依赖父容器的 align-items。stretch:强制拉伸,无视父容器设置。适用场景a
align-items: flex-start 作用:将弹性子元素沿交叉轴的起点对齐。示例: 效果:所有子元素顶部对齐。align-items: flex-end 作用:将弹性子元素沿交叉轴的终点对齐。示例: 效果:所有子元素底部对齐。用法:适用于弹性容器(display: flex 或 display: inline-flex)。控制子元素在交叉轴(默认垂直轴)的对齐方式。其他值:center(
Flexbox基础属性1. display: flex作用:将容器设为Flex布局。示例:2. flex-direction作用:定义主轴方向。取值:row(默认):水平排列(左到右)。row-reverse:水平排列(右到左)。column:垂直排列(上到下)。column-reverse:垂直排列(下到上)。示例:3. flex-wrap作用:控制子项是否换行。取值:nowrap(默认):不换
Flexbox布局常见误区混淆主轴和交叉轴方向误区:认为flex-direction只改变主轴方向正确:同时影响交叉轴方向(主轴为column时,交叉轴变为水平方向)错误理解flex-grow误区:认为flex-grow按比例分配所有空间正确:只分配剩余空间(基础尺寸由flex-basis或内容决定后)默认对齐方式误解误区:项目默认在容器中居中正确:默认align-items: stretch(交