前端开发系列03:Flex 一步到位的线性布局
用 Flex 快速完成导航、按钮组、卡片行内排列,建立稳定的一维布局体系。
目标 在一行里控制“平分”“居中”“换行”三类需求。 实用规则 只在主轴上思考,交叉轴用 align-items。 flex:1 让同组元素平分空间。 小屏下加 flex-wrap: wrap,让内容自动换行。
用 Flex 快速完成导航、按钮组、卡片行内排列,建立稳定的一维布局体系。
目标 在一行里控制“平分”“居中”“换行”三类需求。 实用规则 只在主轴上思考,交叉轴用 align-items。 flex:1 让同组元素平分空间。 小屏下加 flex-wrap: wrap,让内容自动换行。