企业官网建设流程全解析

Day2学习笔记，本来只是把当天的进度随手记下来，结果越写越觉得这里面值得掰扯的东西挺多。如果你也正处在自学前端或者计算机基础的路上，尤其是刚把HTML和CSS过了一遍、准备进入布局实战的阶段，那这篇笔记应该能帮你省点力气。今天主要折腾的是Flexbox和Grid这一块，也就是页面排版的核心武器，顺便把几个我反复出错的地方做了个复盘。文章里没有高深的理论，都是能直接抄去用的代码和思路，写给你，也写给下周的我自己。

先说说今天的学习动机。前两天把Flexbox的教程刷了一遍，当时觉得看懂了，什么主轴交叉轴、justify-content、align-items，每个属性好像都知道是干嘛的。结果昨天想写一个导航栏加卡片列表的页面，一动手发现根本排不出来，要么元素挤成一团，要么垂直方向怎么都居中不了。那种“眼睛会了手不会”的挫败感，估计每个自学者都经历过。所以今天的Day2笔记，核心目标就一个：把Flexbox和Grid从“知道”变成“会用”，用真实的小页面把它们串起来。

1. 今天要解决的问题：为什么看懂了却写不出来

先说个我自己的判断。很多人觉得CSS布局难，其实不是语法难，而是心里没有一个“布局模型”。什么意思呢？就是你看到一个设计图，脑子里得能把它拆成一个个矩形盒子，然后知道这些盒子之间是上下堆叠、左右排列，还是需要互相覆盖。这个过程没建立起来，写多少代码都是瞎试。

所以今天的学习笔记第一步，不是急着写代码，而是先画图。找了一张很普通的移动端个人中心页面，就那种上头一个头像、中间几个菜单列表、底部一个退出按钮的界面，然后用20分钟在纸上把它拆成了三层结构。拆完才恍然大悟，原来很多页面本质上就是“一个大容器里，从上到下排几个块；其中一个块内部，又是从左到右排几个小元素”。这个认识想通了，Flexbox和Grid学起来就顺了，因为它们正是用来控制这种“排布方向”的工具。

另一个重要的心得是：不要一上来就Grid。今天特意做了个对比实验，同一个页面用Flexbox写一遍，再用Grid写一遍。结论很明确：一维排列（一行或一列里的对齐、间距）优先用Flexbox，二维网格（同时控制多行多列）才用Grid。像那种九宫格、商品列表、图片瀑布流，天生适合Grid；而导航栏、按钮组、单行表单，Flexbox写起来更顺手。把这两者的边界划清楚，学习路径就不容易绕晕。

2. 学习笔记里的核心干货：Flexbox避坑与技巧汇总

今天后半段时间全砸在Flexbox上，因为它是日常开发中用得最多的。网上教程特别喜欢堆属性清单，什么flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content，一列一大堆，看着就头大。我的Day2笔记没有照抄这些，而是换了个记忆方法：只记三个关键问题。

第一个问题：主轴朝哪个方向？答案由flex-direction决定。默认是row，也就是从左到右排；改成column就是从上到下排。这个一定要在脑子里形成反射，因为后面所有对齐方式都是相对主轴说的。

第二个问题：元素在主轴方向怎么分布？交给justify-content。它有flex-start、flex-end、center、space-between、space-around、space-evenly这几个值，控制的是“队伍里几个人怎么站位”，尤其space-between在导航栏里用得最多，能让左右元素贴边、中间元素均匀分开。

第三个问题：元素在交叉轴方向怎么对齐？用align-items。这里有个小陷阱，它的默认值是stretch，不是flex-start。也就是说，如果你不设置子元素高度，它们会被拉长填满整个容器高度。这个和很多初学者的直觉是反的，我昨天就是栽在这上面，死活想不通为什么几个按钮变得又高又胖。

把这三个问题理清楚，Flexbox至少能解决八成布局需求。笔记里我还给自己写了一条提醒：align-content和align-items别搞混。前者是针对“多行”的，需要配合flex-wrap使用，单行情况下不起作用；后者是针对“单行内元素”的。一句话概括就是align-content管行、align-items管元素。

3. 实操环节：用Flexbox三十分钟搭出页面骨架

光看不练假把式。今天的实操任务，我选了一个几乎所有网站都会用到的结构：顶部导航栏加底部工具栏，中间是内容卡片流。这个结构覆盖面广，做完之后稍微改改就能复用到自己的项目里。

第一步是搭导航栏。结构就是一个header，里面包一个logo和几个菜单链接。直接用Flexbox，写上display: flex; justify-content: space-between; align-items: center;，导航栏的左右分布和垂直居中一步到位。这里体验特别好的一点是，以前用浮动或者inline-block来处理，总得各种清浮动、调间距，现在三行代码就解决了，省下来的时间都够我多写两个页面。

第二步做内容卡片流。我特意用了flex-wrap，让卡片在一行放不下的时候能自动换行，然后通过justify-content: space-between或者gap来控制卡片间距。这里要特别说一下gap属性，今天第一次觉得它是真的香。以前控制间距得给每个子元素设置margin，还得处理最左边或最右边的多余边距，特别麻烦。有了gap，直接在容器上设一个值，子元素之间就自动产生间距，干净利落。

第三步是固定底部工具栏。常见的操作面板，图标加文字竖着排，这种布局和导航栏不一样，主轴方向不是横的了，得改成flex-direction: column，然后用align-items: center让它们在交叉轴上居中。做完这个小模块，我对“主轴”“交叉轴”的概念又加深了一层，原来它们不是死记硬背的理论，而是每个布局都在用的思考方式。

整体做下来，三十分钟里真正写代码可能就十五分钟，剩下时间都在调整细节，比如按钮的点击区域大小、文字和图标的间距。这也算今天的第二个教训：布局框架只是骨架，真正让页面好用的是那些细小的间距、圆角和内边距的调节，这部分没有任何捷径，只能多练多调。

4. 学习笔记里记录的三个翻车现场与排查过程

既然是Day2笔记，当然不能只记成功经验，翻车记录一样宝贵。今天最有价值的几段内容，全是我踩完坑之后补写的排查过程。

第一个翻车现场是Flex容器里子元素被压缩。我给一个导航栏设置了三个菜单项，想着它们各占三分之一宽度，结果文字一多，右边的菜单项全挤得变形了。排查了半天才发现，原来Flex子元素默认是可以收缩的，也就是flex-shrink的默认值是1。解决办法也很简单，在不想被压缩的元素上写上flex-shrink: 0，或者直接用flex: 0 0 200px这种简写方式把尺寸固定住。这个问题在自适应布局中特别容易遇到，值得记一笔。

第二个翻车现场是垂直居中失败。我为了保证兼容性，特地用了老办法，给父容器设置display: table-cell; vertical-align: middle;，结果发现怎么都不生效。后来检查一下才知道，table-cell只在特定的显示模式下有效，如果父容器同时设置了浮动或者定位，这套方案直接失效。网上很多教程写这个的时候经常不提兼容条件，我照着做就掉坑里了。最终老老实实换成Flexbox的display: flex; align-items: center; justify-content: center;，一下子干净利落。这也是我在笔记里给自己标的重点：遇到垂直居中，优先考虑Flexbox，别去折腾那些迟早要淘汰的兼容写法。

第三个翻车现场比较隐蔽，是flex的比例分配问题。我以为flex: 1就是让所有子元素一样宽，结果发现如果子元素里面有图片或者很长的文字，实际宽度并不会完全相等，因为flex-basis的默认值是auto，它会参考内容的固有尺寸来分配剩余空间。想按精确比例分，得写成flex: 1 1 0%，把基准尺寸清零，三个元素才能严格三等分。这一行小代码，不看真实案例根本体会不到，纯看文档我估计到明年也发现不了。

5. 几个关键技术点的横向对比：grid完胜还是flex真香

说到这，很多人会问，那Grid呢？今天我也花了一些时间对比了Flexbox和Grid在几个常见场景下的表现，记录在笔记里方便自己后面复习。

用表格来梳理会更清楚。比如在实现等宽多列布局时，Flexbox用flex: 1配合gap，Grid用grid-template-columns: repeat(3, 1fr)，两者都能实现，但Grid的语义更清晰，写出来就是“三列等分”，一看就懂。再比如嵌套结构，一个列表里的每一项本身是横排的小组件（头像加名字加按钮），用Flexbox会特别自然地处理这种内部的单排对齐，Grid却需要给每一列单独定义，代码量反而更大。

在换行控制上，Grid天然生成的是二维网格，元素会自动填到下一行，而Flexbox需要设置flex-wrap: wrap才能实现类似效果，而且控制行间距的手段没有Grid直接。间距方面，两者现在都支持gap，但Flexbox的gap属性支持程度在不同浏览器上曾经有过差异，而Grid从支持起就是标配，多行多列一起控制，表现更稳定。

还有一点很实用，Grid的区域命名能力特别适合搭整个页面的宏观骨架，比如顶栏、边栏、主区、底栏，直接通过grid-template-areas命名，代码读起来就像在看一个ASCII画一样的布局图。而Flexbox适合处理局部的、元素数量不确定的小组件。所以今天笔记的结论是：不存在谁替代谁，正确的姿势是页面骨架用Grid，组件内部用Flexbox，两者搭配着来。

6. 当前进度复盘与接下来的思考

笔记的最后，我顺手整理了一下这两天总体的学习收获，也算是个阶段性的小结。

Day1的内容主要集中在HTML语义化和CSS选择器上，说实话那时候写页面基本靠“感觉”，哪里不对就加个margin调一调，效率很低。到了Day2开始系统接触布局，一下子思路开阔了不少。我现在写页面，会先在心里问自己几个问题：这一块是横向还是纵向排列？需要换行吗？元素在交叉轴上是顶对齐还是居中？这些问题一问出来，代码写起来就顺了，因为每个属性都有了自己存在的理由。

今天的笔记里，我还给自己留了一个待办事项：下一步准备把Grid的grid-template-areas拿来做一个完整的个人主页，把头像、侧边栏、文章区、推荐列表全放进去，验证一下今天学的布局知识在真实场景中的表现。另外一个小目标是把响应式布局加入进来，试着用媒体查询控制不同屏幕宽度下布局变化，比如PC端显示侧边栏，移动端就自动隐藏或折叠。这块我今天只摸了个边，下周的Day3笔记应该会有更多内容可以写。

所以这篇Day2学习笔记，要说核心收获，并不是记住了几个属性，而是建立了一个排布思维。以前看页面是看文字和颜色，现在看页面会自动拆解成一个个盒子和一条条排列方向，这种视角的转变，可能才是这两天最值钱的东西。也希望这份笔记能给同样在自学前端的你一点参考，少走几个弯路。