solved-by-flexbox README

The project's README from github.com/philipwalton/solved-by-flexbox. As one markdown file: README.md.

Solved by Flexbox

A showcase of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox.

View Site

Viewing the Site Locally

The Solved by Flexbox site can be built with Node.js. If you have Node.js installed on your system, you can run the following commands to build and serve a local copy.

# Clone the git repository and cd into the cloned directory.
git clone https://github.com/philipwalton/solved-by-flexbox.git
cd solved-by-flexbox

# Install the dependencies
npm install

# Build and serve the site at http://localhost:4000
npm start

This starts up a local server on port 4000. To view the site in your browser, navigate to http://localhost:4000. If you want to use a different port, you can pass the port number as an argument to npm start:

npm start -- -p 8080

In addition to building the site and serving it locally, this will also listen for any changes and rebuild the site as needed. This allows you to play around with the code, refresh the browser, and see your changes instantly.

Translations

The following translations have been graciously provided by the community:

Please note that translations are unofficial and may be inaccurate or out of date. To submit your own translation, please submit a pull request or open an issue and link to your translated content.

solved-by-flexbox (philipwalton/solved-by-flexbox)

Searching Database…

这是什么?一个演示网站,展示了过去用纯 CSS 很难甚至无法实现的布局问题,并说明 Flexbox 如何轻松解决这些问题。
这是一个库,还是只是一个参考网站?这是一个静态参考网站,包含示例和代码片段,不是可以安装到项目中的库或框架。
我要怎样查看示例或在本地运行这个网站?使用 Node.js 和自带的 Gulp 脚本在本地构建并启动网站,例如运行 npm start,它会在端口 4000 上提供网站服务,并在文件修改后自动重新构建。
除了 Node.js,构建它还需要别的东西吗?只需要 Node.js;项目通过 npm 脚本调用 Gulp 来构建和启动网站。
这个网站的内容还在持续维护吗?没有明确说明。不过仓库创建于 2013 年,而且翻译由社区提供,可能已经过时,这也意味着主要内容可能同样没有在持续更新。
这个项目对谁有用?适合需要快速获取常见布局问题解决方案的前端开发者,例如居中、等高列或粘性页脚,这些 CSS Flexbox 方案可以直接复制粘贴使用。
有英文以外的语言版本吗?有。社区成员提供了非官方的中文、日文和韩文翻译,不过这些翻译可能已经过时。
这个网站是怎样部署的?有一个 deploy npm 脚本,它会先清空旧的构建文件夹,然后使用 Gulp 以生产模式构建网站。
Size
2 MB
Stars
12.9K
Updated
CommitDec 03
Age
13y
Commits · 90 Days