❌

阅读视图

发现新文章，点击刷新页面。

flex 布局凭什么成为前端排版的天花板？它让我告别了 float 的所有噩梦

✇掘金 前端
风止何安啊

📝 前言

还在为调个页面布局熬大夜？用 float 排个版，元素到处乱跑；用 position 定个位，稍微改点东西就全乱套。不想熬夜了😭！

别慌，今天咱们就来聊聊前端界的 “救星” — Flex 弹性布局。它就像一个贴心的收纳师，不用绕弯子，不用死抠像素，几行代码就能把元素摆得整整齐齐，从此告别 “叠罗汉” 式的布局噩梦。

🔧 初识 Flex：一个容器搞定所有排列

Flex 布局的核心思想很简单：先让父容器变身成弹性容器，剩下的事情就交给它来安排。只需要一行代码：

.box {
    display: flex;
}

配上html:

<div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

image.png

默认情况下，子元素会自动在水平方向上排成一行，这就是Flex的默认主轴方向。

🎯 主轴与交叉轴：布局的 “指挥棒”

Flex 容器有两根 “指挥棒”：主轴（默认水平方向）和交叉轴（默认垂直方向）。

  • justify-content 管主轴上的排列方式，比如 space-evenly 可以让元素之间的间距完全相等。
  • align-items 管交叉轴上的对齐方式，比如 center 可以让元素在垂直方向上居中。

如果你想把主轴改成垂直方向，只需要给容器加一句：

.box {
    flex-direction: column;
}

就像 index.html 里这样设置后，三个彩色小方块就会乖乖地垂直排列，并且在容器里均匀分布、居中对齐。

.box{
    width: 800px;
    height: 400px;
    border: 1px solid #000;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

image.png

🧩 换行与多轴控制：空间不够？拆分成行！

如果子元素太多，一行放不下怎么办？别担心，flex-wrap: wrap 可以让元素自动换行，就像 index2.html 里这样：

.box {
    flex-wrap: wrap;
    align-content: space-around;
}

补充： align-content 这个属性是专门用来控制换行后，多行元素之间的间距的，比如 space-around 可以让每一行上下都有均匀的留白。

image.png

📊 空间分配：谁胖谁瘦，我说了算

当容器有多余空间时，flex-grow 就会派上用场。它就像给子元素分配 “长胖” 的名额，数值越大，占的空间就越多。比如在 index3.html 里：

.item:nth-child(1){
    flex-grow: 1;
}
.item:nth-child(2){
    flex-grow: 2;
}
.item:nth-child(3){
    flex-grow: 1;
}

这就意味着，中间的绿色方块会 “长胖” 两倍，左右两个方块各 “长胖” 一倍，完美填满整个容器。

image.png

🎨 个性化定制：给某个元素开小灶

如果想让某个子元素在交叉轴上的对齐方式与众不同，align-self 就是你的专属工具。就像 index4.html 里这样，只有中间的绿色方块被单独设置成了 align-self: center，在垂直方向上居中，而其他方块保持默认对齐。

.item:nth-child(2){
    align-self: center;
}

image.png

🌐 实战王者：三栏布局轻松拿捏

Flex 布局最经典的应用场景之一就是三栏布局。比如 three.html 这个例子，我们可以轻松实现 “左侧 + 主体 + 右侧” 的布局，而且主体部分会自动填充剩余空间。

.page {
    height: 200px;
    display: flex;
}
.left, .right {
    width: 200px;
    background-color: #e17a7a;
}
.main {
    background-color: aquamarine;
    flex: 1;
}
.left {
    order: -1;
}

这里的 flex: 1 让主体部分自动占满剩余空间，order: -1 则把左侧栏提前，即使它在 HTML 结构里是写在主体后面的。

image.png

✨ 结语

Flex 布局就像一把万能钥匙，从简单的居中对齐到复杂的响应式布局，它都能轻松搞定。

只要掌握了 display: flex、justify-content、align-items 这些核心属性，再加上 flex-grow、order 这些 “调味剂”，你就能从布局 “小白” 秒变 “大神”。

快去让你的页面元素都乖乖听话吧！

从原生 Node.js 到 Koa：轻量优雅，解锁后端开发新体验

✇掘金 前端
风止何安啊

前言

每一个 Node.js 开发者都有过这样的经历：用原生 http 模块搭建服务时，要手写请求判断、处理响应头，几行代码就变得臃肿不堪。

为了告别这种低效的重复造轮子，Node.js社区涌现出了一批优秀的开发框架，比如：

  • express 框架
  • koa 框架
  • nestjs 框架

今天我们就来聊聊其中最轻巧、最具现代感的 Koa。

一、为什么要用框架？优化在哪？

简单来说，就是提高我们的工作效率。比如原生http写法：

const http = require('http');
const server = http.createServer((req, res) => {
    if (req.url === '/home') {
        res.end('hello world')
    }
});
server.listen(3000, () => {
    console.log('server is running at http://localhost:3000')
});

这样当我们输入URL就成功出现了hello world

image.png

但是写法过于麻烦，太过低级，于是我们选择使用高级的框架。

二、初识 Koa：几行代码搭建完整 Web 服务

Koa 的核心优势之一就是极简，无需复杂的配置，安装后几行代码就能启动一个可运行的 Web 服务，相比原生http模块，省去了大量的基础封装工作。同时koa也是 Express 原班人马打造的下一代 Node.js Web 框架，它抛弃了冗余的内置中间件，用 async/await 让异步代码变得像同步一样清爽。

1. 基础准备与安装

首先确保你的环境装有 Node.js 和 npm（直接去官网下载Node.js即可），然后新建项目文件夹，执行初始化和安装命令：

npm init -y 
npm install koa

2. 第一个 Koa 服务：从 0 到 1

配置好环境，我们就直接上手完成一个最基础的 Koa 服务实现：

// 引入Koa模块
const Koa = require('koa');
// 创建Koa应用实例
const app = new Koa();

// 定义核心业务处理函数
function main(ctx) {
    // 模拟待返回的列表数据
    const data = [
        {id: 1, name: 'henry', age: 18},
        {id: 2, name: 'harvest', age: 19},
        {id: 3, name: 'hello', age: 20}
    ]
    // 判断请求路径，返回对应数据
    if (ctx.url === '/list') {
        ctx.body = data;
    }
}

// 注册中间件，处理所有请求
app.use(main);
// 监听3000端口，启动服务
app.listen(3000, () => {
    console.log('server is running at http://localhost:3000');
});

image.png

这段代码中，ctx 是 Koa 最核心的上下文对象，它把 request 和 response 封装在一起。当访问 http://localhost:3000/list 时，就能直接拿到我们预设的 JSON 数据，无需像原生 http 那样手动设置响应头。

3. 灵活处理响应：多类型适配，一键切换

在实际开发中，我们需要返回不同类型的响应数据，比如 JSON、HTML、纯文本等，Koa 通过ctx.response.type可以轻松实现响应类型的切换，无需手动配置复杂的响应头，让响应处理变得极其灵活。

比如需要返回标准的 JSON 格式数据，只需指定响应类型为json，再给ctx.body赋值即可：

const Koa = require('koa');
const app = new Koa();

function main(ctx) {
    ctx.response.type = 'json'; // 指定响应类型为JSON
    ctx.body = '{"data": "hello koa"}'; // 赋值JSON字符串
}

app.use(main);
app.listen(3000, () => {
    console.log('server is running at http://localhost:3000');
});

image.png

当然啦，大家也可以去试试其他类型，用法是完全一样的😄。

image.png

如果需要返回 HTML 内容，只需将ctx.response.type改为html，ctx.body可以直接赋值 HTML 字符串，也可以读取本地 HTML 文件返回，适配性拉满。

4. 读取本地文件：高效返回，适配页面开发

在 Web 开发中，我们经常需要返回本地的 HTML 页面，Koa 结合 Node.js 的fs模块，能高效实现本地文件的读取和返回，而且通过流的方式读取，避免了大文件一次性加载的性能问题，兼顾效率和性能。

const Koa = require('koa');
const app = new Koa();
const fs = require('fs'); // 引入Node.js内置的文件模块

function main(ctx) {
    ctx.response.type = 'html'; // 指定响应类型为HTML
    // 以流的方式读取本地3.html文件，赋值给响应体
    ctx.body = fs.createReadStream('./3.html');
}

app.use(main);
app.listen(3000, () => {
    console.log('server is running at http://localhost:3000');
});

我们要同时创建一个html的文件，让它读取里面的内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>欢迎访问 koa 服务</h2>
</body>
</html>

image.png

这段代码运行后，访问本地 3000 端口，就能直接看到3.html文件的页面内容，完美适配前端页面的渲染需求。

5. 路由管理：清晰划分，告别杂乱代码

当项目业务逐渐复杂，单一路由已经无法满足需求，我们需要对不同的请求地址做清晰的路由划分，比如首页、关于页、数据接口等，各自对应不同的处理逻辑。Koa 本身没有内置路由功能，但可以通过koa-route中间件快速实现路由管理，让代码结构更清晰，维护更方便。

  • 首先安装koa-route中间件：
npm i koa-route -S
  • 然后通过中间件实现路由的分发和处理，不同路由对应不同函数：
const Koa = require('koa');
const app = new Koa();
const router = require('koa-route'); // 引入路由中间件

// 首页路由处理函数
const home = (ctx) => {
    ctx.body = '这是Koa的首页';
}

// 关于页路由处理函数，支持直接返回HTML标签
const about = (ctx) => {
    ctx.body = '<h2>这是Koa的关于页面</h2>';
}

// 注册GET路由，指定请求地址和对应的处理函数
app.use(router.get('/home', home));
app.use(router.get('/about', about));

app.listen(3000, () => {
    console.log('server is running at http://localhost:3000');
});

此时访问/home会返回首页文字，访问/about会渲染出 HTML 标题，不同路由的逻辑完全分离，即使后续新增路由，也只需新增处理函数并注册即可，代码始终保持整洁。

image.png

image.png

三、 Koa 的核心魅力：中间件与异步（忍不住唠嗑拓展）

聊到 Koa，就不得不提它的两大核心魅力：中间件机制和完美的异步支持。

Koa 的中间件采用洋葱模型执行，所有中间件会从外到内依次执行，再从内到外反向执行，这种机制让请求和响应的处理可以分层实现，各自负责独立的功能，互不干扰，还能实现功能的复用。

而async/await的完美支持，让 Koa 彻底摆脱了回调地狱的困扰。在处理数据库查询、接口请求等异步操作时，无需嵌套多层回调，只需用await等待异步结果，代码的可读性和可维护性大幅提升，这也是 Koa 相比传统框架的一大优势。

四、总结

Koa 作为轻量型 Node.js 框架，以极简核心、洋葱模型中间件机制和对async/await的完美支持为亮点，可灵活处理响应、本地文件、路由等需求，搭配中间件即可按需扩展，兼顾开发效率与代码整洁度，是中小项目及快速开发场景的优选。

结语

Koa 用优雅语法简化了 Node.js 后端开发，平衡了自由度与实用性。入手 Koa，既能摆脱原生开发的冗余，也能快速搭建高效服务，解锁轻量化后端开发的便捷体验。

不允许你还不会 koa！

❌