Ilence Ye

笔记

• 2026-08-12

  如下示例，item 可以通过 JavaScript 来控制渲染或不渲染，换句话说，item 的数量是不确定的 (可能是 1 个 或 2 个等等)。

  <div class="container">
  	<div class="item"></div>
  	<div class="item"></div>
  	<div class="item"></div>
  </div>

  我的需求是：需要将所有 item 排在一行里，整体在 container 里居中对齐。此外，每个 item 限定最大宽度为 40rem，宽度需要尽可能拉伸到 40rem，保证每个 item 等宽。

  那么如何实现这个布局呢？如下：

  .container {
    display: flex;
    justify-content: center;
  }
  
  .item {
    max-width: 40rem;
    flex: 1;
  }

  这里的关键是：

  一是，用 Flexbox 来实现。

  二是，通过 justify-content: center; 实现整体在 container 里居中对齐。

  三是，通过 max-width: 40rem; 和 flex: 1; 的配合实现每个 item 限定最大宽度为 40rem，宽度需要尽可能拉伸到 40rem。

• 2026-08-09

  本地开发 Web 项目有个痛点是，大家全挤在 localhost:3000 或 localhost:5173 等，结果就是各个项目存在 Cookie、LocalStorage、Indexed DB 等浏览器存储里的数据全堆在一个端口里，特别烦。

  为此，试了一下 Portless，用法非常简单：

  先安装：

  pnpm add -D portless

  然后用以下命令替代你之前的 dev 脚本(假设是 Vite 项目的话)：

  {
    "scripts": {
      "dev": "portless run vite dev"
    }
  }

  最后跟之前一样运行 pnpm dev。

  运行后访问 https://<myapp>.localhost 就行。