企业官网建设流程全解析

1. 项目概述

1.1 为什么用 Flex 做登陆页面

先说个我的真实感受：我做过不少网页,早期写登陆页面,要么用浮动,要么用 position 定位布局,再配一堆 hack,项目没做几天就改得猫三狗四。后来彻底切到 Flex,再回头做这类单页面,基本就是半小时搞定,而且自适应这块省下的时间尤其明显。登陆页面看似简单,其实很有代表性——它既有垂直居中、左右分栏这类最常见的结构诉求,又涉及表单控件的对齐、伸缩、换行等细节,把 Flex 练熟了,至少能覆盖前端页面中七成以上的布局场景。

之所以说 Flex 是登陆页面的最佳选择,核心在于三个点：

• 单行优先的排列模型贴合表单结构：用户信息、密码框、按钮天然是横向或纵向的单行流。
• 对齐能力极强：align-items和justify-content两个属性就能解决绝对定位时代需要靠计算才能完成的居中问题。
• 响应式改造简单：flex-wrap加几个断点媒体查询,就能完成移动端到桌面端的形态切换。

这三点不是理论上的优点,而是我实际项目里验证过的场景。而且 Flex 不止能做“整块居中”或“左右两栏”这种大结构,在登陆页的局部细节里也特别好使——按钮组、输入框前缀图标、分割线“或”字那种横线中间夹文字的效果,用 Flex 都比浮动和表格清晰很多。这篇文章不聊虚的,聚焦在“登陆页面”这个具体场景,把 Flex 核心用法、布局解构、完整实操、踩坑排查串起来,一步一步给你看。

1.2 项目场景与目标读者

这个项目适用面很广,但归根结底,它的核心目标是：让你能独立用 Flex 搭出一个带自适应能力的登陆页面,并且明白每一步的代码为什么这么写,而不是单纯复制一段代码交差。

适合读这篇文章的人有三类：

• 刚学完 CSS 基础、想找具体项目练手的前端初学者。登陆页是一个“麻雀虽小五脏俱全”的练习目标,能同时练到结构、样式、响应式。
• 工作里总被“垂直居中”“两栏自适应”这类问题困扰的页面仔,我给出的分析思路和排查方法可以直接落地。
• 需要给公司内部后台或工具站快速套模板的开发者。登陆页不复杂,但直接抄偏前端框架的模板往往引入一堆你用不到的依赖,自己用 Flex 写一个反而更轻。

如果你以前写过浮动布局,应该记得那套“父元素清浮动、宽度算好再减 padding”的老流程。用 Flex 之后,这些退居二线,你只需要关注父子关系、主轴方向、对齐规则,页面就跟着出来了。这篇文章我们就按这个思路往下推。

2. 核心布局拆解与方案选型

2.1 登陆页面的常见结构模式

登陆页面一般不存在太花哨的布局,但仔细拆一下,常见的结构模式无非以下几种：

这些模式虽然视觉差异大,但从 Flex 视角看,本质上就是“容器”和“方向”的排列组合。

全屏居中卡片是最经典的入门案例。它的核心是两层嵌套：第一层把整个 body 变成 Flex 容器,设置flex-direction: column或者直接水平居中；第二层卡片自己成为一个 Flex 容器,负责承载内部的表单元素。我在多个项目里用的写法是让 body 本身撑满视口,然后把 card 在主轴和交叉轴双双居中,这样无论屏幕比例怎么变化,卡片都稳定待在视野正中。

左右分栏模式稍微复杂一点,但依然是两个 Flex 项的问题。左侧品牌区和右侧表单区各占一个flex项目的比例,关键是右侧表单区内部自己也得是 Flex 容器,才能保证表单内容在其区域内居中。这种“容器套容器”的思路是 Flex 页面设计里最核心的思想,后面实操场我会带着你完整写一遍。

顶栏加居中表单的模式则要处理flex-direction的切换：整个页面容器是纵向排列的,顶栏作为第一项不伸缩,中间的内容区作为第二项独占剩余空间并居中。很多开发者刚上手 Flex 时容易踩“顶栏被压缩”的坑,原因是没理解flex-shrink到底怎么起作用,这个我在常见问题部分会专门讲。

底部浮动操作是移动端特有的模式。得益于 Flex 的margin-top: auto技巧,不需要为固定定位元素腾挪空间,直接把按钮推到底部,而且键盘弹出时还不会像fixed那样错位,这个技巧在 PC 端同样适用。

2.2 方案选型对比：Flex vs 传统方案

现在写登陆页面,方案无外乎三类：浮动布局、Grid 布局、Flex 布局。我不打算把 Grid 贬得一文不值,毕竟在某些二维结构性页面上它确实更强,但就登陆页这个特定场景,Flex 的优势非常具体。

我见过不少转 Vue 或 React 的开发者,一上来就整 Grid,把登陆页写成三行两列的网格,结果表单控件的间距和跨列反而调了半天。不是说 Grid 不行,而是没必要用牛刀。Flex 是基于一维排列的模型,正好匹配登陆页表单的线性流,而且它跟 Grid 不冲突,内部局部用 Flex 的写法在 Grid 布局里同样常见。

再聊聊浮动布局。浮动本身是图文混排时代的产物,用于整页布局先天残疾——要清浮动、要处理负 margin、要做居中 hack。虽然我对float没有偏见,在图文混排、文字环绕图片的场景它依然能干,但用来搭登陆页面,就是拿扳手拧螺丝。特别是表单这种需要严格对齐的控件组,浮动布局小数点差一像素都会让两个框肉眼可见地对不齐,而 Flex 的align-items: center和gap直接让这种误差消失。

3. Flex 核心原理与关键细节

3.1 两条轴：主轴与交叉轴

Flex 的一切规则都围绕两条轴展开,很多初学者看不懂代码,就是没把这两条轴掰清楚。

主轴由flex-direction决定,可选row、row-reverse、column、column-reverse。默认是row,也就是水平方向从左到右排列子项。交叉轴永远垂直于主轴,当主轴是水平时,交叉轴就是垂直的；主轴是垂直时,交叉轴就是水平的。

记住这个对应关系之后,justify-content和align-items就不再是“左右居中”“上下居中”这种靠背的属性了。justify-content管的是主轴上子项的排列方式,align-items管的是交叉轴上子项的对齐方式。举个实例：

body { display: flex; justify-content: center; /* 主轴居中,水平居中 */ align-items: center; /* 交叉轴居中,垂直居中 */ }

这段代码是flex-direction: row前提下写的。如果你把flex-direction改成column,那justify-content变成垂直方向生效,align-items变成水平方向生效。属性没变,效果变了。对初学者来说,最稳的方法是先明确主轴方向,再写对齐属性,不然代码很容易“看起来对,跑起来偏”。

3.2 伸缩三件套：grow、shrink 与 basis

flex-grow、flex-shrink、flex-basis这三个属性是 Flex 布局能“自适应”的秘密。我见过很多人直接写flex: 1,但不明白它展开是什么含义,结果需要调整比例时完全没头绪。

先说flex-basis,它定义的是子项在主轴方向上的初始尺寸。注意,这个初始尺寸不一定是最终尺寸,因为后面还有 grow 和 shrink 两个过程。如果flex-direction: row,那么flex-basis的作用相当于宽度；如果是column,则相当于高度。

flex-grow管的是容器有剩余空间时,子项怎么瓜分。容器宽度 1000px,子项初始尺寸三个都是 200px,剩余 400px。如果都设flex-grow: 1,那么 400px 平均分给三项,每项各得约 133.3px,最终每项宽 333.3px。如果第一项设2、其余设1,那 400px 按 2:1:1 分配,第一项拿 200px,后两项各拿 100px。

flex-shrink管的是容器空间不足时,子项怎么压缩。默认值是 1,也就是都允许压缩。很多人碰到“子项被压扁了”或“两个子项重叠了”的问题,往往就是没设置flex-shrink: 0。比如一个按钮组里左边按钮写了width: 200px,右边按钮跟着内容自适应,容器一旦变窄,右边按钮就可能被压缩得文字都换行了。这时候在不想压缩的那一项上加flex-shrink: 0,它就固守自己的尺寸,不参与压缩。

flex是这三个属性的简写.常见写法有：

3.3 对齐细节：align-self 和 margin: auto 的妙用

Flex 的align-self允许单个子项在交叉轴上脱离父级统一的对齐规则,单独设定自己的对齐方式。举个例子,一个有头像、用户名、状态标签的水平卡片,父级设了align-items: center,三个子项垂直居中。这时候状态标签如果想让它在水平方向上贴右,又不想让父级或者右侧的空白区域局部变成花架子,align-self帮不上横向的忙——横向的归属是justify-content和margin-left: auto。

对,margin: auto在 Flex 容器里和普通块级上下文里完全是两码事。普通流中,margin: auto只能水平居中,垂直方向无效。但在 Flex 容器中,auto的 margin 会自动吞噬对应的剩余空间,实现真正的双轴居中。而且有个更妙的用法：

.login-footer { margin-top: auto; }

这段代码写在多行子项的最后一项上,效果是把最后一项推到容器底部,相当于“这个元素不参与排列,而是占住剩余空间之后的位置”。这种技巧非常适用于登陆页底部的“忘记密码”链接、注册引导,或者移动端底部的登陆按钮。比用绝对定位加bottom好用的地方在于：容器高度变化时,这个底部元素会自动跟着移动,不用改代码。

4. 实操：用 Flex 完整搭建一个登陆页面

4.1 页面结构与基础样式搭建

这一节,我们直接写代码。目标是一个“左右分栏 + 右侧表单居中”的典型登陆页,外加一点移动端响应式适配。

首先是 HTML 结构,先确定骨架再写样式：

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flex 登陆页面实战</title> <link rel="stylesheet" href="login.css"> </head> <body> <div class="login-page"> <aside class="brand-panel"> <div class="brand-content"> <h1>Flex 实战</h1> <p>用 Flex 构建你的第一个登陆页面</p> </div> </aside> <main class="form-panel"> <div class="form-card"> <h2>欢迎回来</h2> <p class="subtitle">请使用你的账号密码登录</p> <form id="loginForm"> <div class="field"> <label for="username">账号</label> <input type="text" id="username" name="username" placeholder="请输入账号" autocomplete="username"> </div> <div class="field"> <label for="password">密码</label> <input type="password" id="password" name="password" placeholder="请输入密码" autocomplete="current-password"> </div> <div class="form-options"> <label class="remember"> <input type="checkbox" name="remember"> 记住我 </label> <a href="#" class="forgot-link">忘记密码?</a> </div> <button type="submit" class="submit-btn">登 录</button> </form> <p class="register-tip"> 还没有账号? <a href="#">立即注册</a> </p> </div> </main> </div> </body> </html>

结构上我特意保留了比常见模板更完整一些的辅助内容：brand-panel放品牌区,form-panel放表单区,而表单区里面又套了一层form-card。这个嵌套不是多余——外层form-panel负责和左边的品牌区构成整页的左右分栏,内层form-card负责在右侧区域里把表单内容居中,职责分离后样式调整才不会互相打架。

4.2 核心 Flex 样式逐段解读

基础样式我们直接略过背景色和字体,专门看 Flex 的关键部分：

* { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; font-family: "Microsoft YaHei", system-ui, sans-serif; background: #f0f2f5; } .login-page { display: flex; min-height: 100vh; }

这里min-height: 100vh是必须的,它保证页面至少撑满一屏。注意我用的是min-height而不是height,区别在于：如果内容超高,height会把内容溢出到页面外并且不一定出现滚动条,min-height则允许容器自然长高。

接着是左右分栏最核心的两行代码：

.brand-panel { flex: 0 0 44%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; } .form-panel { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }

brand-panel用了flex: 0 0 44%,意思是固定占据视口宽度的 44%,不伸缩。form-panel用flex: 1,也就是把剩余 56% 的宽度全部吃下。这两个值为什么这么定？我常用 44% 和 56% 的分配,因为视觉上品牌区稍微收一点,表单区稍微宽一点,右侧卡片里有富余空间,观感更平衡。如果你图片比例或文案多,可以改成flex: 0 0 50%或flex: 0 0 40%,改动成本就是一行的事。

接着处理右侧表单卡片的内部布局：

.form-card { width: 100%; max-width: 420px; background: #fff; border-radius: 16px; padding: 48px 40px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); } .form-card h2 { text-align: center; margin-bottom: 8px; } .subtitle { text-align: center; color: #888; margin-bottom: 36px; } .field { display: flex; flex-direction: column; margin-bottom: 20px; } .field label { margin-bottom: 8px; font-size: 14px; color: #333; font-weight: 500; } .field input { height: 44px; border: 1px solid #d9d9d9; border-radius: 8px; padding: 0 14px; font-size: 14px; outline: none; transition: border-color 0.2s; } .field input:focus { border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15); }

.field设flex-direction: column,让 label 和 input 上下排布,配合align-items默认值stretch,输入框会自动拉伸到与父容器同宽。这个拉伸行为是 Flex 最常见的隐式行为,很多新手没意识到——它省去了手工设置width: 100%的工作量。故意在第一个 field 写全,后面相同结构就不用重复贴了,明白原理就能举一反三。

然后看表单里最常用的一个 Flex 小组合——一行里的“记住我”和“忘记密码”：

.form-options { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; } .remember { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #555; } .forgot-link { font-size: 14px; color: #667eea; text-decoration: none; }

justify-content: space-between把两个子项推到了两端,左侧“记住我”,右侧“忘记密码”。如果不用 Flex,这里用浮动还得记住给右浮动元素加清除,或者用绝对定位去贴右边界,麻烦不少。gap属性更是以前没有的福利,它直接设置子项间距,不用再靠外边距互相挤压。

按钮组的写法我特意不用width: 100%,而是用 Flex 让按钮自动撑满：

.submit-btn { width: 100%; height: 46px; border: none; border-radius: 8px; background: #667eea; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.2s; } .submit-btn:hover { background: #5a6fd6; }

这里按钮在form-card这个 Flex 列容器里,由于align-items默认是stretch,设置了width: 100%之后它必然和卡片内容区等宽。其实不写width: 100%也能达到同样效果,但写出来更明确,防止后期在卡片上改动对齐方式导致按钮意外缩成内容宽度。

最底部注册提示文字,用margin-top: auto让它永远靠在卡片底部：

.register-tip { margin-top: 28px; text-align: center; font-size: 14px; color: #888; } .register-tip a { color: #667eea; text-decoration: none; font-weight: 500; }

我加了margin-top: 28px而没有用auto,因为form-card本身不是固定高度,内容多了它会自然长高,此时auto和固定间距没有区别。只有当卡片被固定在某个高度时,auto才会显灵。后面移动端适配的时候会用到。

4.3 响应式适配：从桌面到移动端

左右分栏在大屏上很好用,但手机屏幕宽度有限,再放 44% 的品牌区就很浪费。常见的处理是断点切换：在768px以下,把左右分栏改成上下堆叠,品牌区变成一个高度较矮的头部横幅。

@media (max-width: 768px) { .login-page { flex-direction: column; } .brand-panel { flex: 0 0 180px; } .form-panel { flex: 1; align-items: flex-start; padding: 40px 20px; } .form-card { max-width: 100%; padding: 32px 24px; } }

这里最关键的是flex-direction: column。因为login-page是父容器,它的主轴从水平切换成垂直,那么原来的两个子项brand-panel和form-panel从“左右排”变成“上下排”。同时brand-panel的基准尺寸从 44% 改成固定高度 180px,因为此时它占据的是垂直方向的空间,用百分比高度不靠谱,直接用固定高度最稳妥。

form-panel里的align-items: flex-start也是个细节：移动端如果继续用align-items: center,卡片会水平居中,但左右留白不一定是 20px,一旦卡片比手机宽度长,这 20px 就失效了。改成align-items: flex-start之后,卡片贴着左侧,配合自身的width: 100%和父容器的padding,就能精确保持 20px 的边距。

4.4 最后的成品效果与样式微调

把上述样式拼起来之后,你会看到一个典型的左右分栏登陆页：左侧紫色渐变品牌区,右侧白底卡片表单。在桌面端,它居中且比例协调；在移动端,顶部品牌横幅、下方表单卡片,依然保持可读性。

但“能看”和“好看”之间还有几个微调点,值得单独提出来：

第一,brand-content里的 logo 或图标在 Flex 容器中如何垂直居中。如果你只是放一句标题一句描述,直接align-items: center就够了。但如果里面塞进一个 logo 图片加文字,我建议把brand-content自己也设成flex容器,内部用flex-direction: column; align-items: center,让小元素内部再有自己的对齐粒度。

第二,输入框的字体大小。移动端 Safari 有一个恶心的行为：如果输入框字号小于 16px,它在聚焦时会自动放大页面。为了避免这个,移动端媒体查询里我习惯把输入框字体强制设定为 16px,同时利用CSS的缩放特性保证视觉不变。这个不是 Flex 问题,但跟表单页面强相关,提一句能帮你省一次调试。

第三,卡片阴影和圆角在移动端可以适当调小,因为空间紧凑,大圆角不容易拉开层次。断点里我已经把圆角从 16px 降到 12px,同时把房贷阴影去掉,改为简单边框,这样整体更轻盈。

5. 常见问题与排查技巧实录

5.1 子项为什么被压缩或拉伸变形

这是 Flex 布局里被问烂了的问题,但我还是要专门提出来,因为几乎每个转用 Flex 的人都会撞上一次。现象一般是：某个固定宽度的侧边栏或者按钮,在窗口变窄时突然变窄了,甚至文字被挤得折行。

原因很简单：容器默认允许所有子项收缩,flex-shrink默认值是 1。解决办法也很直接,要么在固定项上写flex-shrink: 0,要么用flex: none整体禁用伸缩。

固定项 { flex-shrink: 0; }

实际开发里,登陆页左侧品牌区如果不想在较窄的窗口里被压缩失比例,也可以把这个规则加上。不过我们的媒体查询已经把品牌区在移动端变成了纵向堆叠,桌面再窄也只是比例略变,不至于出乱子。真正容易出问题的是表单卡片内部的输入框和按钮——如果你在某个局部容器里设置了子项分别flex: 1和width: 200px,就得想清楚哪一个会被压缩。

5.2 未知高度下的主轴方向混乱

另一个高频坑：把justify-content和align-items记反了。尤其是flex-direction: column的容器里,想做个水平居中,顺手写了justify-content: center,结果发现它把子项垂直堆到中间,水平方向纹丝不动。

我自己的纠错口诀是：justify对应“主要方向”,align对应“次要方向”。先看flex-direction是什么,再看当前需要的是主轴方向还是交叉轴方向,再决定写哪个属性。这个口诀在群里面跟新人讲了不下十次,每次都能帮人少走五分钟弯路。

如果你实在记不住,还有一个排查技巧：把justify-content: center换成align-items: center,如果原来不居中了现在居中了,说明方向就是反了。这个“偷懒”的调试法,在复杂嵌套里尤其好用。

5.3 文字截断与溢出问题

Flex 容器里的子项默认有一个min-width: auto的特性,它会让内容的最小尺寸不小于内容的固有宽度。这听起来抽象,实际表现就是：一个长英文单词或者一长串连续字符,会把容器撑破,溢出到外边去。

登陆页场景里,最典型的是“记住我”旁边那行提示文案,或者表单卡片底部那行“还没有账号? 立即注册”。如果这行文字太长,容器宽度不够,可能出现两种结果：一是文字自动换行,二是整体溢出。后者通常发生在该子项设置了white-space: nowrap的情况下。

解决办法是给子项加min-width: 0或者overflow: hidden,让它允许被压缩。但在表单里,我更推荐提前做好文案长度控制,毕竟这不是技术问题,而是产品文案管理问题。技术兜底方案就是：

.overflow-item { min-width: 0; }

5.4 浏览器兼容性陷阱

Flex 的浏览器兼容性现在很好,但如果你还在维护老项目的移动端页面,需要注意gap属性在部分旧版 WebView 上不支持。gap在 Flex 容器里是较新的能力,比起旧式的 margin 方案,它更干净,但如果你的目标环境有兼容要求,建议先用margin做降级。

我的一般做法是：先用gap写正常逻辑,再在媒体查询或降级分支里写margin覆盖。或者干脆在团队规范里约定最低浏览器版本,如果环境支持就无脑用gap。就目前主流浏览器和微信内置 WebView 的更新频率,gap基本都能用了,但安卓原生自带浏览器如果还停在系统自带版本,可能就有坑。

5.5 多行文本在伸缩容器里的高度错乱

另外一个容易出问题的点是：文字较多的品牌区在 Flex 容器内的高度。品牌区本身固定比例,但里面的标题和描述如果超过容器高度,文字可能溢出。align-items: center确实能把整体居中,但溢出的时候,顶部和底部的文字可能都被截断,因为它是以中心为基准往外扩展的。

解决这个问题,实际上不是靠 Flex 属性,而是靠限制内容长度,或者改用align-items: flex-start加上一点padding-top。在品牌文案比较长的场景下,我通常会为brand-content设置最大高度,并用overflow: hidden避免撑破卡片。这些经验在初次搭建时根本想不起来,往往是上线后老板说“这里文字多了个尾巴”才发现。

5.6 快速问题排查表

这里面有些问题不是第一天就能遇到,但只要是长期写页面的人,迟早都会碰到。我把它们列成表,就是为了让你以后排查时不用从第一行代码开始翻,直接对照现象找对策就行。

6. 经验总结与扩展思路

6.1 实际项目中的体会

开发这个登陆页面的全部过程,我前后大约花了半天。包括布局结构的设计、响应式适配、表单交互的调试,以及后续的兼容性修补。如果是第一次接触 Flex 的新手,可能会慢一些,关键在于你愿不愿意花时间理解“主轴”和“交叉轴”的定义,以及flex-grow和flex-shrink的分配机制。理解透了,这些代码就是肌肉记忆,再遇到其它页面结构,基本都能用相同的思维拆开。

我个人的习惯是用 Flex 把页面“从大到小”逐层拆解：先定整页分栏,再定卡片内部的行列,最后才处理单个按钮、输入框、文本的对齐。这个顺序能避免后面返工,也让你想清楚哪些容器需要flex-direction切换、哪些子项需要align-self做特例。希望你也试试这个流程,相信会给你带来不一样的开发体验。

6.2 从登陆页扩展到完整后台布局

登陆页做完,你完全可以顺着同样的思路继续扩展。把.form-panel换成flex: 1的内容区,再加一个侧边栏flex: 0 0 220px,就是一个标准后台管理的骨架。侧边栏固定,内容区自适应,这也是 Flex 最典型的应用场景之一。

如果再往上走,可以引入 Grid 去做整体页面框架,然后用 Flex 处理每个模块内部的排布,这是目前很多团队的实际写法。不过那是另一个话题,至少先把 Flex 练到“随手能写出合适布局”的程度,再谈 Grid 也不迟。

6.3 最后一小步：动效和细节

如果你想让登陆页更“活”一点,可以给卡片加一个简单的入场动画。核心思路是卡片进场时从透明度 0 和轻微位移开始,过渡到正常状态,配合 Flex 的居中式定位,动画的起点和终点都很容易控制。这个不是 Flex 的必修课,但既然页面都搭好了,加点细节会让整个项目显得更完整。

另外,输入框聚焦时的高亮边框和阴影,我在前面代码里已经写过一个版本。如果你想做得更精致,可以再配一个图标前置的输入框方案——左侧放一个小图标,用 Flex 的align-items: center让图标跟输入框文字垂直居中,右侧用gap保持间距,这个结构跟之前remember那个小盒子是同一种套路,练熟之后你会发现 Flex 的复用在页面设计里无处不在。