交叉轴对齐

image
image
image
解析:
image
1.关键 Flex 属性说明:
justify-content: space-around:每个子块左右都有均等空白,两端也留白;
align-items: stretch:弹性默认垂直对齐方式,如果子元素不写固定 height,会自动拉高铺满父盒子高度。
image
2.div[class^=item]:属性开头匹配选择器,匹配所有 class 名称以item开头的 div(item1/item2/item3),批量统一样式,简化代码。
运行结果:
image

posted @ 2026-07-09 08:43  高冷的生煎包  阅读(7)  评论(0)    收藏  举报