做前端这些年我见过不少人把Flex布局的文档翻来覆去看了好几遍真到写页面的时候还是不知道用哪个属性。后来我发现一个特别好用的练手项目拿一个支付类应用首页当靶子纯粹用Flexbox把它还原一遍。这个练习在不少前端学习资料里都被称为某支付应用首页布局实战它的好处在于首页上那点东西几乎把Flexbox的日常用法全覆盖了顶部的三段式搜索栏、中间一排排铺开的图标区、可以横向滑动的卡片以及底部固定的五个Tab。你只要把这几个区域做明白工作里的绝大多数布局需求也就拿下了。这篇文章直接把整个练习过程拆开来讲从动手之前的布局拆解到每个区域的关键代码再到我踩过的坑和排查思路。适合刚学完HTML和CSS基础、对Flex的用法还停留在“会水平垂直居中”阶段的人也适合打算系统梳理一遍Flex的老开发。我不会把文档里的属性定义重新念一遍而是告诉你每个属性在真实页面上应该怎么用、用了以后会有什么表现以及出了问题要怎么调。1. 动手之前先拆解支付类App首页到底长什么样写代码之前先去把目标首页截几张图然后拿笔在纸上把这个页面分成几个水平区块。这个习惯看起来不起眼但真的能帮你省掉后面大量改样式的返工时间。我参考的常见版本整个首页从上到下基本是这样一个结构最顶上是搜索栏区紧接着是一块大的图标区往下翻的时候会依次出现横幅广告、宫格入口、一组组的图文列表卡片最底端是固定的Tab切换栏。每个区域内部几乎都是一排元素做等分、居中对齐或者两边顶格。1.1 从截图中提取布局区块的实操方法自己拿截图和纸笔走一遍这个流程比直接看我用文字总结要有用得多。我一般会把截图拉到绘图软件里用矩形框把每个“能独立看成一坨”的内容框起来。这一步有两个原则先框大结构再框小结构一个矩形框里只放排列方向一致的内容。比如搜索栏是一个大框里面左边的图标、中间的搜索输入框、右边的图标是沿水平方向排列的一个小结构。到了金刚区横着看是一行五个图标竖着看是两行到三行那它就是一个“先横后纵”的复合结构得拆成外层容器和内部每个图标两层来看。框完之后你大概率会发现整个页面就是无数个“横向一排”叠加起来的。搜索栏是横向一排金刚区的每一行是横向一排列表卡片的内部也还是“头像在左、文字在右”的横向一排。这就是为什么这个练习和Flex是天生一对Flexbox解决的正是一个方向上元素的排列和对齐问题。你先把一排解决明白然后把一排排纵向叠进页面滚动流里首页的骨架就出来了。理解到这一层你后面写代码的时候脑子里始终会有“当前我在处理哪一个方向”这根弦。1.2 哪些区域适合Flex哪些不适合也不是说整个首页都得用flex有些地方明显更适合别的方案。最典型的就是整个页面的滚动容器那是一个纵向文档流默认的block排列就是最佳方案没必要把body做成flex-column再套一堆东西。再比如某个严格等分的宫格行列数量固定、每一格尺寸完全一致用Grid会更省事。但如果你本意就是想系统练一遍Flex那在宫格区域坚持用flex-wrap来做也完全可行只要知道取舍在哪里flex-wrap适合内容数量不确定、希望自动换行的场景Grid适合希望行列结构稳定、需要对齐“行轨道”和“列轨道”的场景。举个例子支付首页顶部的四宫格大按钮比如“扫一扫、付钱、收钱、乘车码”这类入口用flex布局四个按钮flex:1等分宽度每个按钮内部再用一个纵向flex把图标和文字上下排好。这是一个非常适合练手的组合因为外层是横排、内层是竖排两个方向正好把flex的两种flex-direction都用上了。而如果换成Grid你当然也能做但那种情况下Grid的优势其实没那么明显因为这里只有一排元素需要处理用flex反而更直观。1.3 为什么不用Float或者绝对定位老读者可能还记得flex普及之前这种首页基本都是用float堆出来的。我自己早年就这么干过踩过的坑现在还记得很清楚子元素float之后父容器高度塌陷得给父容器加clearfix否则背景和边框都会穿帮要让一个元素垂直居中得给它设line-height或者算死margin-top要实现几等分的多列哪怕用百分比也得考虑border和padding会不会把宽度撑爆。Flex是一次性解决这些问题的方案父容器一行display:flex子项默认就会在交叉轴上被拉伸对齐垂直居中变成一行代码水平间距用gap就能控制父容器也不再需要清浮动。这个历史包袱不是用来怀旧的而是想说明为什么这个练习值得做。你在练习里遇到的每一个“flex好像没生效”的瞬间背后都对应着以前用float和定位方案时非常别扭的一类问题。把flex用顺了你相当于掌握了一套“以后写布局默认先想flex”的直觉这会直接改变你的出活速度。2. 实战要用到的Flex核心概念按需求讲Flexbox的一切都是围绕主轴展开的所以这一节我不按文档顺序讲属性而是按你写首页时会遇到的真实需求来讲。先分清主轴和交叉轴再搞懂尺寸分配接着处理对齐最后管间距。这样等你到了第三节写代码的时候每个属性都有具体的落点不会觉得是在背语法。2.1 先搞清楚主轴方向再动手默认的主轴方向是水平方向也就是flex-direction:row元素从左往右排改成column之后主轴就变成垂直方向元素从上往下排。很多新手在写纵向排列的时候忘记改direction导致写了一个flex容器结果里面的div还是横着排然后对着样式表发呆半天。我自己练这个项目的时候最常出现的错误也就是这一处。怎么判断该用row还是column回到上一节说的“矩形框”如果这个区域里的元素是横着排的用row如果是竖着排的用column。复杂一些的区域就反过来想外层用大的方向内层用和外层垂直的方向。比如金刚区的每个图标外层要一行五个横排于是容器用row加flex-wrap每个图标内部图标在上、文字在下于是一个图标自己就是一个column的flex容器。这一横一竖两层的嵌套几乎就是整个首页所有布局的基本单位练熟了以后看任何页面都能迅速拆出这两层。另外有一个值得提的细节flex-direction:row-reverse和column-reverse会改变元素的视觉顺序但不会改变HTML里的DOM顺序。这个特性在写一些需要考虑阅读顺序的场景时有用比如某些设计稿里一行内容是从右往左读的你可以不动DOM只改一个属性。不过练习首页的阶段用不太上知道有这么回事就行面试偶尔会问。2.2 flex-grow、flex-shrink、flex-basis的分工如果说主轴方向决定了“往哪排”那“占多大”就由flex-grow、flex-shrink、flex-basis这三个属性决定。我用一句话概括它们的关系flex-basis是元素在主轴方向上的初始尺寸flex-grow决定空间多了的时候怎么瓜分flex-shrink决定空间不够的时候怎么压缩。绝大多数时候你只需要用缩写flex比如flex:1它的完整写法是flex:1 1 0%意思是“初始尺寸为0多余空间全部由我吸收空间不够允许我压缩”。这个写法常被用来实现“中间元素占满剩余宽度”搜索栏中间那个输入框就是标准例子。另外一个高频写法是flex:none等价于flex:0 0 auto意思是“我的尺寸由内容或width决定既不增长也不收缩”。练首页时凡是你不希望被压缩的元素比如头像、图标、右侧箭头都应该显式给flex:none。我见过太多人写列表卡片时右侧的小箭头被压缩成一条细线或者图片被压扁根因都是忘了这回事。当你明白每个值背后的含义之后遇到“我的div怎么变小了”这类问题第一反应就会是查flex-shrink而不是去改width。关于flex-basis还有一个容易忽略的细节它默认值是auto此时会去取width的值一旦你设置了flex-basis它在主轴方向上就优先于width生效。在row方向下flex-basis:200px和width:200px效果几乎一样但flex-basis是跟随主轴方向的如果你把子项改成column方向flex-basis:200px限制的就是高度了。这个特性在做竖向排版的卡片时偶尔会用到平时理解成“这是主轴方向的尺寸”就好。2.3 justify-content、align-items、align-content别记混这三个对齐属性是flex出错的重灾区。我的记忆方法是justify-content只管主轴方向的分布align-items管交叉轴方向上每一行内部的对齐align-content管多行作为一个整体在交叉轴方向的分布。后两者的区别最容易被忽略align-content只有在flex-wrap让容器出现多行时才起作用如果只有一行你设置align-content是看不到任何效果的。属性作用维度管什么justify-content主轴一排内容在主轴方向的分布align-items交叉轴当前行内部子项的交叉轴对齐align-content交叉轴多行整体在交叉轴方向的分布把这个映射到首页实例里就很直观。搜索栏内部的图标和输入框要垂直居中用的是align-items:center因为主轴是水平方向交叉轴是垂直方向align-items管的就是这个。金刚区的图标文字居中对齐图标在文字上方用的是内层flex容器的justify-content:center和align-items:center组合此时内层主轴是垂直方向justify-content负责文字和图标在垂直方向上的分布align-items让它们在水平方向上居中。练完这两个区域这三个属性的区别基本就刻进肌肉记忆了。还有个值得写进笔记的小细节容器开了flex-wrap之后如果多行之间有明显的间距需求用align-content:space-between或者gap都能解决但两者处理的语义不一样。align-content控制的是“行与行之间的空格”gap控制的则是“子元素之间的空格”在只有一行时gap依然生效而align-content不会。后面写横向滚动卡片区域时你会同时用到这两个属性来管理间距到时候可以对照着看。2.4 间距用gap还是marginFlex布局里给子元素之间加间距现在首选是gap。gap是容器属性写在父元素上会自动在子元素之间插入固定的间距而且不会出现margin那种“相邻两个元素margin合并”或者“最后一个元素末尾多余间距”的问题。以前浏览器不支持gap的时候大家只能用margin加负margin的花活或者给最后一个子元素单独去掉margin代码很不优雅。现在主流浏览器里gap已经相当稳了直接用就好。有一点要注意gap在flex容器中会同时在主轴和交叉轴两个方向生效。如果你只想要水平间距不想让垂直方向多出空隙可以分别写row-gap和column-gap。练习金刚区的时候这就很关键图标区域往往要求列与列之间有间距行与行之间也要有间距但两者的值可能不一样这时写gap:8px 12px这种两值形式或者单独写row-gap、column-gap都比在每个子元素上敲margin灵活得多。3. 分区域实操从搜索栏到金刚区再到底部Tab前面讲了那么多原理这一节全部落到代码上。我按首页从上到下的顺序把每个区域的做法和关键代码写出来。你照着敲一遍再把参数改一改效果很快就能出来。3.1 搜索栏三段式的标准做法支付类首页顶部几乎都有搜索栏结构是“左侧图标 中间搜索条 右侧图标”。我写的时候会先铺一个header容器display:flexalign-items:centerpadding留出上下空间然后让左右两个图标用flex:none占住自己的位置中间的搜索条用flex:1把剩下的宽度全部吃掉。代码如下header classheader div classheader-icon≡/div div classheader-search span classsearch-placeholder搜索/span /div div classheader-icon◎/div /header.header { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #fff; } .header-icon { flex: none; width: 28px; height: 28px; /* 图标样式略 */ } .header-search { flex: 1; display: flex; align-items: center; justify-content: center; height: 32px; border-radius: 16px; background: #f5f5f5; }这段代码里有三个要点值得反复咀嚼。第一个是header用align-items:center而不是给子元素手动加margin-top这样就算icon尺寸变了整体依然是垂直居中的。第二个是中间搜索条内部又造了一个flex容器所以“搜索”两个字可以随心所欲地水平垂直居中而不会因为padding不一致偏掉。第三个是gap:10px同时管理了三个子元素之间的间距少写了不少margin。等你把这个搜索栏的代码跑出来对照截图看会发现肉眼看起来和原页面非常接近但代码量比用float的旧写法少了一大截。3.2 金刚区flex-wrap的经典场景接下来是那个几行几列的图标区。我用一个section包住所有图标display:flexflex-wrap:wrap然后每个图标定宽20%。为什么是20%因为一行放五个100%除以5等于20%。每个图标内部还是一个纵向flex上面一个圆形的icon下面一行文字。核心结构如下section classgrid div classgrid-item div classicon扫/div span扫一扫/span /div !-- 重复若干次共10个 -- /section.grid { display: flex; flex-wrap: wrap; padding: 12px 0; } .grid-item { flex: 0 0 20%; display: flex; flex-direction: column; align-items: center; margin: 8px 0; } .icon { width: 48px; height: 48px; border-radius: 12px; background: #eee; display: flex; align-items: center; justify-content: center; }这里最值得琢磨的是flex:0 0 20%这个写法。第一项0表示不增长第二项0表示不收缩第三项20%表示基础宽度是父容器的20%。这样十个图标必然严格地每行五个不会因为内容长短被挤得歪歪扭扭。如果你写的是flex:0 0 25%那就是每行四个的排版。想改列数只要改这个百分比非常方便。这就是flex-wrap的好处你不用去数一行放几个然后手动换行容器满了自动往下排。每个图标内部我用flex-direction:column把图标和文字摆成了上下的结构再用align-items:center让它们在水平方向居中。这里有个典型的初学者错误以为在flex容器里要水平居中就得给子元素写margin:0 auto其实设置flex容器的justify-content:center和align-items:center就够用了。因为图标和文字这个组合的尺寸不定用对齐属性比用固定定位活得舒服得多。3.3 横向滚动卡片区让卡片保持自己的宽度支付首页在金刚区下面通常会有一个可以左右滑动的小卡片区比如横幅广告或者各种消费券。这个区域是练习flex-shrink的好素材。容器依然是display:flex但加了overflow-x:auto每个卡片写flex:0 0 240px意思是每张卡片的宽度固定为240px绝对不会因为容器放不下而收缩。这样你就能保证用户滑动的每一屏里卡片宽度稳定、露出半张下一张卡作为视觉提示。.card-scroll { display: flex; gap: 12px; overflow-x: auto; padding: 12px; scroll-snap-type: x mandatory; } .card { flex: 0 0 240px; height: 96px; border-radius: 8px; background: #f5f5f5; scroll-snap-align: center; }我在这里顺手加了scroll-snap-type和scroll-snap-align这不是flex的内容但实操的时候很有用它能让滑动结束后卡片自动吸附对齐手感接近原生应用的滚动效果。如果你做的是纯flex练习这两行可以去掉不影响布局本质。还有一个细节是容器加了padding之后要注意滚动条的位置如果不想让滚动条贴着最左边可以把padding写在容器上让第一张卡和左边缘之间也有留白。这个区域你能实际体会到gap和flex-basis协同工作的状态。3.4 图文列表卡片左固定右自适应的万能结构这个结构在首页里反复出现头像在左、标题和描述在中间、箭头在右。它的代码是所有flex布局里复用率最高的值得写得规范一点。我把外层li设置成display:flex和align-items:center左边缩略图flex:none中间内容区flex:1右箭头flex:none。内容区内部如果还有多行文字可以再嵌一个column方向的flex或者直接让标题、描述用block元素上下排。section classlist div classlist-item div classlist-thumb/div div classlist-body div classlist-title账单/div div classlist-desc查看每笔收支明细/div /div div classlist-arrow›/div /div !-- 其他列表项 -- /section.list-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #fff; } .list-thumb { flex: none; width: 44px; height: 44px; border-radius: 8px; } .list-body { flex: 1; min-width: 0; } .list-title { font-size: 16px; line-height: 22px; } .list-desc { font-size: 12px; color: #999; line-height: 18px; } .list-arrow { flex: none; color: #ccc; }注意我给list-body加了min-width:0。这是一个非常关键的细节flex子项的min-width默认值是auto也就是说子项的最小宽度不会小于它内容的宽度。如果描述文字很长内容区会被文字撑开把右侧箭头挤出容器或者把整个卡片撑爆。设置min-width:0之后内容区允许被压缩到比内容更窄这时内部的文字才会按正常规则换行截断。你在写列表、写标签、写任何“中间自适应右侧固定”的结构时这一行都是救命的。3.5 底部TabBar五个Tab怎么均分底部Tab是固定定位的里面五个Tab要平均占满整个宽度。实现方法很简单容器display:flex每个Tab flex:1配合text-align:center。flex:1会让每个Tab的宽度相同哪怕文字长度不一样只要文字使用了单行截断不会把容器撑开整体就能保持均分。这五个Tab的图标用纵向flex来排列和金刚区图标的思路完全一样外层Tab横向均分内部图标在上、文字在下。.tabbar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; background: #fff; border-top: 1px solid #eee; padding-bottom: env(safe-area-inset-bottom); } .tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 0; }这里有两个实操中容易忽略的点。一个是底部安全区现在很多手机屏幕有底部横条和圆角为了让Tab不贴到最底下需要加padding-bottom:env(safe-area-inset-bottom)。这个和flex无关但你不加的话页面在全面屏手机上看会很难受。另一个是fixed定位的Tab会遮挡页面内容所以最外层的页面容器要预留一个和Tab高度相等的padding-bottom比如60px否则最后一块内容会被Tab盖住看不全。这些细节叠加起来你才能交付一个真正能上真机看的页面。4. 高频问题与排查实录这个章节是练习过程中最值钱的部分。我把练这个首页时大家最容易踩的坑整理成了一张速查表后面每个问题再展开说一下排查思路。现象常见原因排查顺序子元素被压扁flex-shrink默认是1看容器宽度给子项加flex:none垂直居中无效用了align-content而非align-items确认主轴方向确认是否多行最后一行不齐space-between遇到非整行数量定死每行数量或用占位符文字撑破容器min-width默认为auto给内容区加min-width:0gap没生效版本过老或写错属性名检查浏览器支持检查是否flex容器4.1 子元素被压扁不是width的锅练这个项目时最常见的现象图片或图标变窄了明明设置了width:48px。检查点往往不是width而是flex-shrink。因为flex子项的默认flex-shrink是1容器空间不足时它会收缩width只是它的“期望值”不是“底线值”。解决办法要么给这个元素加flex:none要么在容器里给整体调整宽度。排查的顺序我建议是先看容器有没有宽度溢出再看子项有没有被嵌套flex影响最后直接给子项加flex:none看效果基本两分钟就能定位。4.2 justify-content:center没让内容居中这种情况要分两个方向想如果主轴是rowjustify-content:center是水平居中如果容器里只有一行你用了align-content:center想垂直居中大概率没效果因为align-content管的是多行作为整体的分布单行时它不干活。正确的垂直居中要看align-items。我见过不少人在这两个属性之间来回试最后发现是flex-direction的问题。写代码前先默念三遍“主轴、交叉轴、多行”能少走不少弯路。4.3 图标排列到最后一行少一个金刚区十一个图标的情况下最后一行会只排一个用justify-content:space-between的时候这个孤零零的图标会跑到最左边看起来特别别扭。处理手法有几种一是让每一行的数量是固定的比如统一按20%宽度排五个最后多余的元素用占位符补齐二是改用justify-content:flex-start配合每项固定的margin-right最后一项的margin可以通过:nth-child或者容器负margin收掉三是接受视觉上的左对齐。平时练习我推荐第一种因为最简单而且能让你顺便思考“如何用空div占位”这种小技巧。4.4 文字把flex布局撑破这个必须单独拿出来说flex子项里的文字默认不会自动换行截断而是会撑开父容器。遇到“文字太长把右侧图标挤出去了”给文字所在的那个flex子项加上min-width:0或者给文字本身加overflow:hidden、text-overflow:ellipsis、white-space:nowrap的组合。首页的标题和描述一般都不会太长但真实项目里这条经验几乎天天用得上提前练好不亏。4.5 1px边框怎么处理才像真的视觉还原的时候支付类首页里有很多细边框如果直接写border:1px solid #eee在普通屏幕上还行在高分辨率屏幕上看会偏粗偏脏。常见的做法是给元素加::after伪元素用transform:scaleY(0.5)来模拟半像素的线或者用box-shadow:0 -1px 0 #eee来画。前者语义清楚后者的代码更短。这个已经不是flex的范畴但做视觉还原练习必然要碰到提前了解几条方案能让你的还原度上一个台阶。4.6 排查工具要会用调试flex布局浏览器开发者工具是最好用的帮手。Elements面板里点击一个flex容器会看到每个子元素的flex信息还能直接在可视化面板上修改justify-content、align-items等属性实时看效果。我练习的时候基本是开着开发者工具边改边看的比来回刷新页面试错快太多。遇到搞不懂的间距来源直接看Computed面板里的gap和margin很多“莫名其妙多出来的空隙”都是padding或者gap设重复导致的。5. 扩展思路与我的个人习惯代码全部跑通之后这个练习其实还能往前走两步。第一步是把练习稿抽象成自己的组件第二步是形成一套固定的写法套路。这两步做完你就不只是“照着还原了一个页面”而是真正把flex变成了自己的基本功。5.1 把练习稿整理成自己的组件做完首页之后别急着丢到一边。我建议你把这几个区域抽成独立的CSS类比如.header、.grid、.card-scroll、.list-item、.tabbar然后试着在一个空页面里不写原本的HTML结构徒手把这些类用在新的内容上。如果新的内容也能正确排布说明你抽象出来的组件是可复用的。这个动作的意义很大等于把一次“抄作业”变成了自己的方法库以后再写后台管理页面、移动端H5、活动落地页直接复用这些结构就行。我现在的日常工作中列表卡片和横向滚动卡片的基本样式就是从当年这个练习里沉淀出来的。5.2 我写Flex的固定顺序如果让我分享一个最具体的个人经验那就是写Flex布局的固定顺序先定display:flex再想flex-direction然后对齐属性最后处理flex-basis、flex-grow、flex-shrink和gap。这个顺序看起来简单但能保证你不是想到哪写到哪。很多人一上来就写justify-content回头发现方向不对又全部推翻代码看起来乱排查也麻烦。按顺序来基本每个容器都是一次成型。对于初学者我甚至建议你每写一个flex容器就在注释里标一行“主轴横向子项三个”这样的小笔记等熟练了再删掉。5.3 最后分享一个调试小窍门调试flex布局时我喜欢临时给每个flex子项加一个醒目的背景色比如background:rgba(0,0,255,0.1)这样每个元素的边界一目了然哪里多占了、哪里没对齐一眼就能看出来。定位到问题之后再把背景色删掉。这个方法看起来笨但比盯着代码推理快得多尤其是嵌套很多层flex的时候。另一个小习惯是给容器加outline而不是border因为outline不影响布局尺寸不会导致改样式时把布局挤乱。两个技巧配合起来调试效率能翻倍。练完这个首页你对flex的掌控力基本就够应付生产环境里七八成的布局需求了。剩下两成多是一些浏览器兼容性或者复杂交互相关的细节等到具体项目里遇到了再查资料也不迟。我个人练完最大的收获不是记住了多少属性而是形成了“先拆结构、再想方向、最后调对齐”的肌肉记忆。这一步走完后面的路会顺很多。
做前端这些年我见过不少人把Flex布局的文档翻来覆去看了好几遍真到写页面的时候还是不知道用哪个属性。后来我发现一个特别好用的练手项目拿一个支付类应用首页当靶子纯粹用Flexbox把它还原一遍。这个练习在不少前端学习资料里都被称为某支付应用首页布局实战它的好处在于首页上那点东西几乎把Flexbox的日常用法全覆盖了顶部的三段式搜索栏、中间一排排铺开的图标区、可以横向滑动的卡片以及底部固定的五个Tab。你只要把这几个区域做明白工作里的绝大多数布局需求也就拿下了。这篇文章直接把整个练习过程拆开来讲从动手之前的布局拆解到每个区域的关键代码再到我踩过的坑和排查思路。适合刚学完HTML和CSS基础、对Flex的用法还停留在“会水平垂直居中”阶段的人也适合打算系统梳理一遍Flex的老开发。我不会把文档里的属性定义重新念一遍而是告诉你每个属性在真实页面上应该怎么用、用了以后会有什么表现以及出了问题要怎么调。1. 动手之前先拆解支付类App首页到底长什么样写代码之前先去把目标首页截几张图然后拿笔在纸上把这个页面分成几个水平区块。这个习惯看起来不起眼但真的能帮你省掉后面大量改样式的返工时间。我参考的常见版本整个首页从上到下基本是这样一个结构最顶上是搜索栏区紧接着是一块大的图标区往下翻的时候会依次出现横幅广告、宫格入口、一组组的图文列表卡片最底端是固定的Tab切换栏。每个区域内部几乎都是一排元素做等分、居中对齐或者两边顶格。1.1 从截图中提取布局区块的实操方法自己拿截图和纸笔走一遍这个流程比直接看我用文字总结要有用得多。我一般会把截图拉到绘图软件里用矩形框把每个“能独立看成一坨”的内容框起来。这一步有两个原则先框大结构再框小结构一个矩形框里只放排列方向一致的内容。比如搜索栏是一个大框里面左边的图标、中间的搜索输入框、右边的图标是沿水平方向排列的一个小结构。到了金刚区横着看是一行五个图标竖着看是两行到三行那它就是一个“先横后纵”的复合结构得拆成外层容器和内部每个图标两层来看。框完之后你大概率会发现整个页面就是无数个“横向一排”叠加起来的。搜索栏是横向一排金刚区的每一行是横向一排列表卡片的内部也还是“头像在左、文字在右”的横向一排。这就是为什么这个练习和Flex是天生一对Flexbox解决的正是一个方向上元素的排列和对齐问题。你先把一排解决明白然后把一排排纵向叠进页面滚动流里首页的骨架就出来了。理解到这一层你后面写代码的时候脑子里始终会有“当前我在处理哪一个方向”这根弦。1.2 哪些区域适合Flex哪些不适合也不是说整个首页都得用flex有些地方明显更适合别的方案。最典型的就是整个页面的滚动容器那是一个纵向文档流默认的block排列就是最佳方案没必要把body做成flex-column再套一堆东西。再比如某个严格等分的宫格行列数量固定、每一格尺寸完全一致用Grid会更省事。但如果你本意就是想系统练一遍Flex那在宫格区域坚持用flex-wrap来做也完全可行只要知道取舍在哪里flex-wrap适合内容数量不确定、希望自动换行的场景Grid适合希望行列结构稳定、需要对齐“行轨道”和“列轨道”的场景。举个例子支付首页顶部的四宫格大按钮比如“扫一扫、付钱、收钱、乘车码”这类入口用flex布局四个按钮flex:1等分宽度每个按钮内部再用一个纵向flex把图标和文字上下排好。这是一个非常适合练手的组合因为外层是横排、内层是竖排两个方向正好把flex的两种flex-direction都用上了。而如果换成Grid你当然也能做但那种情况下Grid的优势其实没那么明显因为这里只有一排元素需要处理用flex反而更直观。1.3 为什么不用Float或者绝对定位老读者可能还记得flex普及之前这种首页基本都是用float堆出来的。我自己早年就这么干过踩过的坑现在还记得很清楚子元素float之后父容器高度塌陷得给父容器加clearfix否则背景和边框都会穿帮要让一个元素垂直居中得给它设line-height或者算死margin-top要实现几等分的多列哪怕用百分比也得考虑border和padding会不会把宽度撑爆。Flex是一次性解决这些问题的方案父容器一行display:flex子项默认就会在交叉轴上被拉伸对齐垂直居中变成一行代码水平间距用gap就能控制父容器也不再需要清浮动。这个历史包袱不是用来怀旧的而是想说明为什么这个练习值得做。你在练习里遇到的每一个“flex好像没生效”的瞬间背后都对应着以前用float和定位方案时非常别扭的一类问题。把flex用顺了你相当于掌握了一套“以后写布局默认先想flex”的直觉这会直接改变你的出活速度。2. 实战要用到的Flex核心概念按需求讲Flexbox的一切都是围绕主轴展开的所以这一节我不按文档顺序讲属性而是按你写首页时会遇到的真实需求来讲。先分清主轴和交叉轴再搞懂尺寸分配接着处理对齐最后管间距。这样等你到了第三节写代码的时候每个属性都有具体的落点不会觉得是在背语法。2.1 先搞清楚主轴方向再动手默认的主轴方向是水平方向也就是flex-direction:row元素从左往右排改成column之后主轴就变成垂直方向元素从上往下排。很多新手在写纵向排列的时候忘记改direction导致写了一个flex容器结果里面的div还是横着排然后对着样式表发呆半天。我自己练这个项目的时候最常出现的错误也就是这一处。怎么判断该用row还是column回到上一节说的“矩形框”如果这个区域里的元素是横着排的用row如果是竖着排的用column。复杂一些的区域就反过来想外层用大的方向内层用和外层垂直的方向。比如金刚区的每个图标外层要一行五个横排于是容器用row加flex-wrap每个图标内部图标在上、文字在下于是一个图标自己就是一个column的flex容器。这一横一竖两层的嵌套几乎就是整个首页所有布局的基本单位练熟了以后看任何页面都能迅速拆出这两层。另外有一个值得提的细节flex-direction:row-reverse和column-reverse会改变元素的视觉顺序但不会改变HTML里的DOM顺序。这个特性在写一些需要考虑阅读顺序的场景时有用比如某些设计稿里一行内容是从右往左读的你可以不动DOM只改一个属性。不过练习首页的阶段用不太上知道有这么回事就行面试偶尔会问。2.2 flex-grow、flex-shrink、flex-basis的分工如果说主轴方向决定了“往哪排”那“占多大”就由flex-grow、flex-shrink、flex-basis这三个属性决定。我用一句话概括它们的关系flex-basis是元素在主轴方向上的初始尺寸flex-grow决定空间多了的时候怎么瓜分flex-shrink决定空间不够的时候怎么压缩。绝大多数时候你只需要用缩写flex比如flex:1它的完整写法是flex:1 1 0%意思是“初始尺寸为0多余空间全部由我吸收空间不够允许我压缩”。这个写法常被用来实现“中间元素占满剩余宽度”搜索栏中间那个输入框就是标准例子。另外一个高频写法是flex:none等价于flex:0 0 auto意思是“我的尺寸由内容或width决定既不增长也不收缩”。练首页时凡是你不希望被压缩的元素比如头像、图标、右侧箭头都应该显式给flex:none。我见过太多人写列表卡片时右侧的小箭头被压缩成一条细线或者图片被压扁根因都是忘了这回事。当你明白每个值背后的含义之后遇到“我的div怎么变小了”这类问题第一反应就会是查flex-shrink而不是去改width。关于flex-basis还有一个容易忽略的细节它默认值是auto此时会去取width的值一旦你设置了flex-basis它在主轴方向上就优先于width生效。在row方向下flex-basis:200px和width:200px效果几乎一样但flex-basis是跟随主轴方向的如果你把子项改成column方向flex-basis:200px限制的就是高度了。这个特性在做竖向排版的卡片时偶尔会用到平时理解成“这是主轴方向的尺寸”就好。2.3 justify-content、align-items、align-content别记混这三个对齐属性是flex出错的重灾区。我的记忆方法是justify-content只管主轴方向的分布align-items管交叉轴方向上每一行内部的对齐align-content管多行作为一个整体在交叉轴方向的分布。后两者的区别最容易被忽略align-content只有在flex-wrap让容器出现多行时才起作用如果只有一行你设置align-content是看不到任何效果的。属性作用维度管什么justify-content主轴一排内容在主轴方向的分布align-items交叉轴当前行内部子项的交叉轴对齐align-content交叉轴多行整体在交叉轴方向的分布把这个映射到首页实例里就很直观。搜索栏内部的图标和输入框要垂直居中用的是align-items:center因为主轴是水平方向交叉轴是垂直方向align-items管的就是这个。金刚区的图标文字居中对齐图标在文字上方用的是内层flex容器的justify-content:center和align-items:center组合此时内层主轴是垂直方向justify-content负责文字和图标在垂直方向上的分布align-items让它们在水平方向上居中。练完这两个区域这三个属性的区别基本就刻进肌肉记忆了。还有个值得写进笔记的小细节容器开了flex-wrap之后如果多行之间有明显的间距需求用align-content:space-between或者gap都能解决但两者处理的语义不一样。align-content控制的是“行与行之间的空格”gap控制的则是“子元素之间的空格”在只有一行时gap依然生效而align-content不会。后面写横向滚动卡片区域时你会同时用到这两个属性来管理间距到时候可以对照着看。2.4 间距用gap还是marginFlex布局里给子元素之间加间距现在首选是gap。gap是容器属性写在父元素上会自动在子元素之间插入固定的间距而且不会出现margin那种“相邻两个元素margin合并”或者“最后一个元素末尾多余间距”的问题。以前浏览器不支持gap的时候大家只能用margin加负margin的花活或者给最后一个子元素单独去掉margin代码很不优雅。现在主流浏览器里gap已经相当稳了直接用就好。有一点要注意gap在flex容器中会同时在主轴和交叉轴两个方向生效。如果你只想要水平间距不想让垂直方向多出空隙可以分别写row-gap和column-gap。练习金刚区的时候这就很关键图标区域往往要求列与列之间有间距行与行之间也要有间距但两者的值可能不一样这时写gap:8px 12px这种两值形式或者单独写row-gap、column-gap都比在每个子元素上敲margin灵活得多。3. 分区域实操从搜索栏到金刚区再到底部Tab前面讲了那么多原理这一节全部落到代码上。我按首页从上到下的顺序把每个区域的做法和关键代码写出来。你照着敲一遍再把参数改一改效果很快就能出来。3.1 搜索栏三段式的标准做法支付类首页顶部几乎都有搜索栏结构是“左侧图标 中间搜索条 右侧图标”。我写的时候会先铺一个header容器display:flexalign-items:centerpadding留出上下空间然后让左右两个图标用flex:none占住自己的位置中间的搜索条用flex:1把剩下的宽度全部吃掉。代码如下header classheader div classheader-icon≡/div div classheader-search span classsearch-placeholder搜索/span /div div classheader-icon◎/div /header.header { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #fff; } .header-icon { flex: none; width: 28px; height: 28px; /* 图标样式略 */ } .header-search { flex: 1; display: flex; align-items: center; justify-content: center; height: 32px; border-radius: 16px; background: #f5f5f5; }这段代码里有三个要点值得反复咀嚼。第一个是header用align-items:center而不是给子元素手动加margin-top这样就算icon尺寸变了整体依然是垂直居中的。第二个是中间搜索条内部又造了一个flex容器所以“搜索”两个字可以随心所欲地水平垂直居中而不会因为padding不一致偏掉。第三个是gap:10px同时管理了三个子元素之间的间距少写了不少margin。等你把这个搜索栏的代码跑出来对照截图看会发现肉眼看起来和原页面非常接近但代码量比用float的旧写法少了一大截。3.2 金刚区flex-wrap的经典场景接下来是那个几行几列的图标区。我用一个section包住所有图标display:flexflex-wrap:wrap然后每个图标定宽20%。为什么是20%因为一行放五个100%除以5等于20%。每个图标内部还是一个纵向flex上面一个圆形的icon下面一行文字。核心结构如下section classgrid div classgrid-item div classicon扫/div span扫一扫/span /div !-- 重复若干次共10个 -- /section.grid { display: flex; flex-wrap: wrap; padding: 12px 0; } .grid-item { flex: 0 0 20%; display: flex; flex-direction: column; align-items: center; margin: 8px 0; } .icon { width: 48px; height: 48px; border-radius: 12px; background: #eee; display: flex; align-items: center; justify-content: center; }这里最值得琢磨的是flex:0 0 20%这个写法。第一项0表示不增长第二项0表示不收缩第三项20%表示基础宽度是父容器的20%。这样十个图标必然严格地每行五个不会因为内容长短被挤得歪歪扭扭。如果你写的是flex:0 0 25%那就是每行四个的排版。想改列数只要改这个百分比非常方便。这就是flex-wrap的好处你不用去数一行放几个然后手动换行容器满了自动往下排。每个图标内部我用flex-direction:column把图标和文字摆成了上下的结构再用align-items:center让它们在水平方向居中。这里有个典型的初学者错误以为在flex容器里要水平居中就得给子元素写margin:0 auto其实设置flex容器的justify-content:center和align-items:center就够用了。因为图标和文字这个组合的尺寸不定用对齐属性比用固定定位活得舒服得多。3.3 横向滚动卡片区让卡片保持自己的宽度支付首页在金刚区下面通常会有一个可以左右滑动的小卡片区比如横幅广告或者各种消费券。这个区域是练习flex-shrink的好素材。容器依然是display:flex但加了overflow-x:auto每个卡片写flex:0 0 240px意思是每张卡片的宽度固定为240px绝对不会因为容器放不下而收缩。这样你就能保证用户滑动的每一屏里卡片宽度稳定、露出半张下一张卡作为视觉提示。.card-scroll { display: flex; gap: 12px; overflow-x: auto; padding: 12px; scroll-snap-type: x mandatory; } .card { flex: 0 0 240px; height: 96px; border-radius: 8px; background: #f5f5f5; scroll-snap-align: center; }我在这里顺手加了scroll-snap-type和scroll-snap-align这不是flex的内容但实操的时候很有用它能让滑动结束后卡片自动吸附对齐手感接近原生应用的滚动效果。如果你做的是纯flex练习这两行可以去掉不影响布局本质。还有一个细节是容器加了padding之后要注意滚动条的位置如果不想让滚动条贴着最左边可以把padding写在容器上让第一张卡和左边缘之间也有留白。这个区域你能实际体会到gap和flex-basis协同工作的状态。3.4 图文列表卡片左固定右自适应的万能结构这个结构在首页里反复出现头像在左、标题和描述在中间、箭头在右。它的代码是所有flex布局里复用率最高的值得写得规范一点。我把外层li设置成display:flex和align-items:center左边缩略图flex:none中间内容区flex:1右箭头flex:none。内容区内部如果还有多行文字可以再嵌一个column方向的flex或者直接让标题、描述用block元素上下排。section classlist div classlist-item div classlist-thumb/div div classlist-body div classlist-title账单/div div classlist-desc查看每笔收支明细/div /div div classlist-arrow›/div /div !-- 其他列表项 -- /section.list-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #fff; } .list-thumb { flex: none; width: 44px; height: 44px; border-radius: 8px; } .list-body { flex: 1; min-width: 0; } .list-title { font-size: 16px; line-height: 22px; } .list-desc { font-size: 12px; color: #999; line-height: 18px; } .list-arrow { flex: none; color: #ccc; }注意我给list-body加了min-width:0。这是一个非常关键的细节flex子项的min-width默认值是auto也就是说子项的最小宽度不会小于它内容的宽度。如果描述文字很长内容区会被文字撑开把右侧箭头挤出容器或者把整个卡片撑爆。设置min-width:0之后内容区允许被压缩到比内容更窄这时内部的文字才会按正常规则换行截断。你在写列表、写标签、写任何“中间自适应右侧固定”的结构时这一行都是救命的。3.5 底部TabBar五个Tab怎么均分底部Tab是固定定位的里面五个Tab要平均占满整个宽度。实现方法很简单容器display:flex每个Tab flex:1配合text-align:center。flex:1会让每个Tab的宽度相同哪怕文字长度不一样只要文字使用了单行截断不会把容器撑开整体就能保持均分。这五个Tab的图标用纵向flex来排列和金刚区图标的思路完全一样外层Tab横向均分内部图标在上、文字在下。.tabbar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; background: #fff; border-top: 1px solid #eee; padding-bottom: env(safe-area-inset-bottom); } .tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 0; }这里有两个实操中容易忽略的点。一个是底部安全区现在很多手机屏幕有底部横条和圆角为了让Tab不贴到最底下需要加padding-bottom:env(safe-area-inset-bottom)。这个和flex无关但你不加的话页面在全面屏手机上看会很难受。另一个是fixed定位的Tab会遮挡页面内容所以最外层的页面容器要预留一个和Tab高度相等的padding-bottom比如60px否则最后一块内容会被Tab盖住看不全。这些细节叠加起来你才能交付一个真正能上真机看的页面。4. 高频问题与排查实录这个章节是练习过程中最值钱的部分。我把练这个首页时大家最容易踩的坑整理成了一张速查表后面每个问题再展开说一下排查思路。现象常见原因排查顺序子元素被压扁flex-shrink默认是1看容器宽度给子项加flex:none垂直居中无效用了align-content而非align-items确认主轴方向确认是否多行最后一行不齐space-between遇到非整行数量定死每行数量或用占位符文字撑破容器min-width默认为auto给内容区加min-width:0gap没生效版本过老或写错属性名检查浏览器支持检查是否flex容器4.1 子元素被压扁不是width的锅练这个项目时最常见的现象图片或图标变窄了明明设置了width:48px。检查点往往不是width而是flex-shrink。因为flex子项的默认flex-shrink是1容器空间不足时它会收缩width只是它的“期望值”不是“底线值”。解决办法要么给这个元素加flex:none要么在容器里给整体调整宽度。排查的顺序我建议是先看容器有没有宽度溢出再看子项有没有被嵌套flex影响最后直接给子项加flex:none看效果基本两分钟就能定位。4.2 justify-content:center没让内容居中这种情况要分两个方向想如果主轴是rowjustify-content:center是水平居中如果容器里只有一行你用了align-content:center想垂直居中大概率没效果因为align-content管的是多行作为整体的分布单行时它不干活。正确的垂直居中要看align-items。我见过不少人在这两个属性之间来回试最后发现是flex-direction的问题。写代码前先默念三遍“主轴、交叉轴、多行”能少走不少弯路。4.3 图标排列到最后一行少一个金刚区十一个图标的情况下最后一行会只排一个用justify-content:space-between的时候这个孤零零的图标会跑到最左边看起来特别别扭。处理手法有几种一是让每一行的数量是固定的比如统一按20%宽度排五个最后多余的元素用占位符补齐二是改用justify-content:flex-start配合每项固定的margin-right最后一项的margin可以通过:nth-child或者容器负margin收掉三是接受视觉上的左对齐。平时练习我推荐第一种因为最简单而且能让你顺便思考“如何用空div占位”这种小技巧。4.4 文字把flex布局撑破这个必须单独拿出来说flex子项里的文字默认不会自动换行截断而是会撑开父容器。遇到“文字太长把右侧图标挤出去了”给文字所在的那个flex子项加上min-width:0或者给文字本身加overflow:hidden、text-overflow:ellipsis、white-space:nowrap的组合。首页的标题和描述一般都不会太长但真实项目里这条经验几乎天天用得上提前练好不亏。4.5 1px边框怎么处理才像真的视觉还原的时候支付类首页里有很多细边框如果直接写border:1px solid #eee在普通屏幕上还行在高分辨率屏幕上看会偏粗偏脏。常见的做法是给元素加::after伪元素用transform:scaleY(0.5)来模拟半像素的线或者用box-shadow:0 -1px 0 #eee来画。前者语义清楚后者的代码更短。这个已经不是flex的范畴但做视觉还原练习必然要碰到提前了解几条方案能让你的还原度上一个台阶。4.6 排查工具要会用调试flex布局浏览器开发者工具是最好用的帮手。Elements面板里点击一个flex容器会看到每个子元素的flex信息还能直接在可视化面板上修改justify-content、align-items等属性实时看效果。我练习的时候基本是开着开发者工具边改边看的比来回刷新页面试错快太多。遇到搞不懂的间距来源直接看Computed面板里的gap和margin很多“莫名其妙多出来的空隙”都是padding或者gap设重复导致的。5. 扩展思路与我的个人习惯代码全部跑通之后这个练习其实还能往前走两步。第一步是把练习稿抽象成自己的组件第二步是形成一套固定的写法套路。这两步做完你就不只是“照着还原了一个页面”而是真正把flex变成了自己的基本功。5.1 把练习稿整理成自己的组件做完首页之后别急着丢到一边。我建议你把这几个区域抽成独立的CSS类比如.header、.grid、.card-scroll、.list-item、.tabbar然后试着在一个空页面里不写原本的HTML结构徒手把这些类用在新的内容上。如果新的内容也能正确排布说明你抽象出来的组件是可复用的。这个动作的意义很大等于把一次“抄作业”变成了自己的方法库以后再写后台管理页面、移动端H5、活动落地页直接复用这些结构就行。我现在的日常工作中列表卡片和横向滚动卡片的基本样式就是从当年这个练习里沉淀出来的。5.2 我写Flex的固定顺序如果让我分享一个最具体的个人经验那就是写Flex布局的固定顺序先定display:flex再想flex-direction然后对齐属性最后处理flex-basis、flex-grow、flex-shrink和gap。这个顺序看起来简单但能保证你不是想到哪写到哪。很多人一上来就写justify-content回头发现方向不对又全部推翻代码看起来乱排查也麻烦。按顺序来基本每个容器都是一次成型。对于初学者我甚至建议你每写一个flex容器就在注释里标一行“主轴横向子项三个”这样的小笔记等熟练了再删掉。5.3 最后分享一个调试小窍门调试flex布局时我喜欢临时给每个flex子项加一个醒目的背景色比如background:rgba(0,0,255,0.1)这样每个元素的边界一目了然哪里多占了、哪里没对齐一眼就能看出来。定位到问题之后再把背景色删掉。这个方法看起来笨但比盯着代码推理快得多尤其是嵌套很多层flex的时候。另一个小习惯是给容器加outline而不是border因为outline不影响布局尺寸不会导致改样式时把布局挤乱。两个技巧配合起来调试效率能翻倍。练完这个首页你对flex的掌控力基本就够应付生产环境里七八成的布局需求了。剩下两成多是一些浏览器兼容性或者复杂交互相关的细节等到具体项目里遇到了再查资料也不迟。我个人练完最大的收获不是记住了多少属性而是形成了“先拆结构、再想方向、最后调对齐”的肌肉记忆。这一步走完后面的路会顺很多。
