47 | …
48 |
49 |
50 |
51 |
52 |
53 | ```
54 |
55 | ## CSS 代码
56 |
57 |
58 |
59 | 让中间部分撑开并让页脚粘在底部的方法使用了 [粘性页脚](../sticky-footer/) 中相同的技术。唯一的不同点是，圣杯布局的中间部分 (`.HolyGrail-body`) 需要指定 `display:flex` 来控制子元素的布局。
60 |
61 |
62 |
63 | ```css
64 | .HolyGrail {
65 | display: flex;
66 | min-height: 100vh;
67 | flex-direction: column;
68 | }
69 |
70 | .HolyGrail-body {
71 | display: flex;
72 | flex: 1;
73 | }
74 | ```
75 |
76 | 制造三个等高的，流式居中，定宽的边栏很简单：
77 |
78 |
79 |
80 | ```css
81 | .HolyGrail-content {
82 | flex: 1;
83 | }
84 |
85 | .HolyGrail-nav,
86 | .HolyGrail-ads {
87 | /* 12em is the width of the columns */
88 | flex: 0 0 12em;
89 | }
90 |
91 | .HolyGrail-nav {
92 | /* put the nav on the left */
93 | order: -1;
94 | }
95 | ```
96 |
97 |
98 |
99 |
100 | ### 响应式
101 |
102 |
103 |
104 | 圣杯布局来自于每个人都使用个人计算机冲浪的互联网时期的网页设计，但是随着移动设备的激增，圣杯布局已渐渐没落。
105 |
106 |
107 |
108 | 另一方面，使用 Flexbox 布局，创建一个移动设备优先和移动设备友好版本的圣杯布局很简单。其主旨就是把中间的部分默认指定为 `flex-direction:column` ，然后为拥有更宽屏幕的设备指定 `flex-direction:row` 。
109 |
110 |
111 |
112 | 这里是一个完整版的移动式被优先响应式示例。你可以调整浏览器大小来查看效果。
113 |
114 |
115 |
116 | ```css
117 | .HolyGrail,
118 | .HolyGrail-body {
119 | display: flex;
120 | flex-direction: column;
121 | }
122 |
123 | .HolyGrail-nav {
124 | order: -1;
125 | }
126 |
127 | @media (min-width: 768px) {
128 | .HolyGrail-body {
129 | flex-direction: row;
130 | flex: 1;
131 | }
132 | .HolyGrail-content {
133 | flex: 1;
134 | }
135 | .HolyGrail-nav,
136 | .HolyGrail-ads {
137 | /* 12em is the width of the columns */
138 | flex: 0 0 12em;
139 | }
140 | }
141 | ```
142 |
143 | 在 Github 中查看这个 demo 中完整的圣杯组件 [源代码](https://github.com/magic-akari/solved-by-flexbox/blob/master/assets/css/components/holy-grail.css)
144 |
145 |
146 |
--------------------------------------------------------------------------------
/demos/input-add-ons.md:
--------------------------------------------------------------------------------
1 | ---
2 | template: default.html
3 | title: 输入附加组件
4 | excerpt: 创建全宽度，流式的输入/按钮组在 CSS 的历史中几乎不可能。有了 Flexbox 布局，一切将会变得更简单。
5 | ---
6 |
7 | 因为输入组件 CSS 的工作方式，几乎不可能在一个元素之前或之后附加另一个元素，并让它宽度自适应地占满剩余空间。
8 |
9 |
10 |
11 | 当前仅有的方法，要么知道输入组件的宽度，要么使用 `display:table-cell` ，后者有着自己的问题，尤其是绝对定位在跨浏览器时遭遇的困难。
12 |
13 |
14 |
15 | 有了 Flexbox 布局，所有的问题都烟消云散，并且代码也极其简单。此外，输入栏和输入附加组件默认同高。
16 |
17 |
18 |
19 |
20 |
43 |
44 | ## 前置附加组件和后置附加组件
45 |
46 |
47 |
48 |
21 |
31 | 前置附加组件
22 |
23 | 数量
24 |
25 |
26 |
27 |
28 |
29 |
30 |
32 |
42 | 后置附加组件
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
49 |
64 |
65 | ## HTML 代码
66 |
67 |
68 |
69 | ```html
70 |
71 |
50 |
56 |
51 |
52 |
53 |
54 |
55 |
57 |
63 |
58 |
59 |
60 |
61 |
62 |
72 |
73 |
74 |
75 |
76 |
77 |
78 | …
79 |
80 |
81 |
82 |
83 |
84 | …
85 |
86 |
87 |
88 | ```
89 |
90 | ## CSS 代码
91 |
92 |
93 |
94 | ```css
95 | .InputAddOn {
96 | display: flex;
97 | }
98 |
99 | .InputAddOn-field {
100 | flex: 1;
101 | /* field styles */
102 | }
103 |
104 | .InputAddOn-item {
105 | /* item styles */
106 | }
107 | ```
108 |
109 | 在 Github 中查看这个 demo 中完整的输入附加组件 [源代码](https://github.com/magic-akari/solved-by-flexbox/blob/master/assets/css/components/input-add-on.css)
110 |
111 |
112 |
--------------------------------------------------------------------------------
/demos/media-object.md:
--------------------------------------------------------------------------------
1 | ---
2 | template: default.html
3 | title: 媒体对象
4 | excerpt: 创建含有固定或变化的头像的媒体对象，不用担心溢出(overflow)，清除浮动(clearfixing)，或者块格式化上下文(block formatting context)等奇技淫巧。
5 | ---
6 |
7 | [媒体对象](http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code) 是面向对象 CSS 的典型代表 (OOCSS). 它的简单实用让很多 CSS 开发者(包括我自己)转向了 OOCSS 开发方法。
8 |
9 |
10 |
11 | 但是像众多 CSS 布局技巧一样，媒体对象必须求助于各种奇技淫巧来达成目标。
12 |
13 |
14 |
15 | 媒体对象的正文不能出现在头像的下边，通过创建一个 [块格式化上下文(block formatting context)](http://www.stubbornella.org/content/2013/07/31/re-visiting-the-secret-power-of-block-fomatting-context/) 或者使用一个与图片等宽的左外边距(margin)/内边距(padding) 。媒体对象必须清除 body 的浮动，通过指定 `overflow:hidden` 或使用伪元素来达成。
16 |
17 |
18 |
19 | 有了 Flexbox 布局，一切都解决了。附带着，FLexbox 布局还允许我们设置任意设置头像的垂直对齐方式。我们可以轻松地把头像移到右边而不用改一行源代码。
20 |
21 |
22 |
23 | ## 基础示例
24 |
25 |
26 |
27 |
28 |
60 |
61 | ## 无图像
62 |
63 |
64 |
65 |
29 |
48 |
30 |
38 |
31 | 
32 |
37 |
32 |
33 |
36 | 标准媒体对象
34 |Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac nisl quis massa vulputate adipiscing. Vivamus sit amet risus ligula. Nunc eu pulvinar augue.
35 |
39 |
47 |
40 |
41 |
46 |
41 |
42 |
45 | 标准媒体对象
43 |Donec imperdiet sem leo, id rutrum risus aliquam vitae. Cras tincidunt porta mauris, vel feugiat mauris accumsan eget.
44 |
49 |
59 |
50 |
58 |
51 |
52 |
57 |
52 |
53 |
56 | 逆序媒体对象
54 |Phasellus vel felis purus. Aliquam consequat pellentesque dui, non mollis erat dictum sit amet. Curabitur non quam dictum, consectetur arcu in, vehicula justo. Donec tortor massa, eleifend nec viverra in, aliquet at eros. Mauris laoreet condimentum mauris, non tempor massa fermentum ut. Integer gravida pharetra cursus. Nunc in suscipit nunc.
55 |
66 |
89 |
90 | ## 嵌套媒体对象
91 |
92 |
93 |
94 |
67 |
77 |
68 |
76 |
69 |
75 |
71 |
74 | 使用图标
72 |Donec imperdiet sem leo, id rutrum risus aliquam vitae. Vestibulum ac turpis non lacus dignissim dignissim eu sed dui.
73 |
78 |
88 |
79 |
87 |
80 |
86 |
82 |
85 | 垂直居中的图标
83 |Nunc nec fermentum dolor. Duis at iaculis turpis. Sed rutrum elit ac egestas dapibus. Duis nec consequat enim.
84 |
95 |
157 |
158 | ## HTML 代码
159 |
160 |
161 |
162 | ```html
163 |
96 |
130 |
131 |
97 |
129 |
98 |
99 |
128 |
99 |
100 |
127 | 媒体对象标题
101 |Phasellus vel felis purus. Aliquam consequat pellentesque dui, non mollis erat dictum sit amet. Curabitur non quam dictum, consectetur arcu in, vehicula justo.
102 |
103 |
112 |
104 |
105 |
106 |
107 |
111 |
106 | 108 | Mauris porta arcu id magna adipiscing lacinia at congue lacus. Vivamus blandit quam quis tincidunt egestas. Etiam posuere lectus sed sapien malesuada molestie. 109 |
110 |
113 |
126 |
114 |
115 |
116 |
117 |
125 |
116 |
118 |
124 | Vestibulum ac turpis non lacus dignissim dignissim eu sed dui. Proin a ligula sit amet massa malesuada mattis eu a ante. Nunc porttitor sed quam quis sollicitudin. Vestibulum ac turpis non lacus dignissim dignissim eu sed dui.
119 |
120 |
121 |
123 | Rutrum risus aliquam vitae.
122 |
132 |
156 |
133 |
155 |
134 |
135 |
154 |
135 |
136 |
153 | 媒体对象标题
137 |Phasellus vel felis purus. Aliquam consequat pellentesque dui, non mollis erat dictum sit amet. Curabitur non quam dictum, consectetur arcu in, vehicula justo. Donec tortor massa, eleifend nec viverra in, aliquet at eros. Mauris laoreet condimentum mauris, non tempor massa fermentum ut.
138 |
139 |
140 |
142 | Donec imperdiet sem leo, id rutrum risus aliquam vitae.
141 |
143 |
152 |
144 |
145 |
146 |
147 |
151 |
146 | 148 | Mauris porta arcu id magna adipiscing lacinia at congue lacus. Vivamus blandit quam quis tincidunt egestas. Etiam posuere lectus sed sapien malesuada molestie. Aliquam vitae pharetra dolor. Nullam non mattis nunc. 149 |
150 |
164 | ![]()
165 |
167 | ```
168 |
169 | ## CSS 代码
170 |
171 |
172 |
173 | ```css
174 | .Media {
175 | display: flex;
176 | align-items: flex-start;
177 | }
178 |
179 | .Media-figure {
180 | margin-right: 1em;
181 | }
182 |
183 | .Media-body {
184 | flex: 1;
185 | }
186 | ```
187 |
188 | 在 Github 中查看这个 demo 中完整的媒体对象组件 [源代码](https://github.com/magic-akari/solved-by-flexbox/blob/master/assets/css/components/media.css)
189 |
190 |
191 |
--------------------------------------------------------------------------------
/demos/sticky-footer.md:
--------------------------------------------------------------------------------
1 | ---
2 | template: default.html
3 | title: 粘性页脚
4 | excerpt: 让你的页脚粘在底部一直以来是一个技巧。如果页脚的高度未知，那么基本上就不可能了。然而这已成为过去。
5 | ---
6 |
7 | …
166 |
8 |
9 | 点击下边的按钮来隐藏这个页面的内容，注意在页面内容无法填充整个页面时，页脚是如何粘在窗口底部的。
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 当页面内容稀少时，让页脚粘在页面底部，是每一个 Web 开发者在他的生涯中尝试解决过的问题。并且，可以说绝大多数情况，这是一个已被解决的问题。然而 [现存的解决方案](http://ryanfait.com/resources/footer-stick-to-bottom-of-page/) 有一个重大的缺陷 — 如果高度未知，就会失效。
20 |
21 |
22 |
23 | Flexbox 布局可以完美解决这类问题。众所周知， Flexbox 布局经常被用在水平布局中，然而在垂直布局中 Flexbox 布局也格外拿手。你所要做的就是把垂直部分包在 flex 容器中，并选择一个元素可以让它展开以高度自适应。它们会自动地利用容器所有可用空间。
24 |
25 |
26 |
27 | 下边的示例中，容器被设置成窗口的高度，内容被设置成按需要扩展。_(注意：在垂直布局中你需要指定容器的高度，这一点和水平布局的自适应不同。)_
28 |
29 |
30 |
31 | ## HTML 代码
32 |
33 |
34 |
35 | ```html
36 |
37 | …
38 | …
39 |
40 |
41 | ```
42 |
43 | ## CSS 代码
44 |
45 |
46 |
47 | ```css
48 | .Site {
49 | display: flex;
50 | min-height: 100vh;
51 | flex-direction: column;
52 | }
53 |
54 | .Site-content {
55 | flex: 1;
56 | }
57 | ```
58 |
59 | 在 Github 中查看这个 demo 中完整的粘性页脚组件 [源代码](https://github.com/magic-akari/solved-by-flexbox/blob/master/assets/css/components/site.css)
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
83 |
--------------------------------------------------------------------------------
/demos/vertical-centering.md:
--------------------------------------------------------------------------------
1 | ---
2 | template: default.html
3 | title: 垂直居中
4 | excerpt: 这个经典的问题一直被 CSS hackers 挑战了很多年，历史的解决方案没有一个能够完整地解决。有了 Flexbox 布局，终于成为了可能。
5 | ---
6 |
7 | 一直以来缺乏好的垂直居中的方法，是 CSS 的黑点。
8 |
9 |
10 |
11 | 更糟糕的是，目前的垂直居中的技术晦涩而又反直觉，最直接的选择(比如 `vertical-align:middle`) 从未起过作用。
12 |
13 |
14 |
15 | 目前的[垂直解决方案](http://css-tricks.com/centering-in-the-unknown/) 使用了 从负外边距 到 `display:table-cell` 等荒谬的奇技淫巧，包括全高的伪元素。这些技术有时候能够生效，然而并不是所有情况都能如愿。如果你想垂直居中一个形状不确定，或者子元素不是父元素唯一的子元素呢？如果你能用伪元素居中这种奇技淫巧，但是你又想用伪元素做些其他的事呢？
16 |
17 |
18 |
19 | 用了 Flexbox 布局，不再纠结这些麻烦。你可以任意对齐(垂直或者水平)，仅仅设置`align-items`, `align-self`, 和 `justify-content` 这些属性就好。
20 |
21 |
22 |
23 |
24 |
33 |
34 | 不像一些现存的垂直居中技术，Flexbox 垂直居中并不会影响其相邻元素的对齐方式。
35 |
36 |
37 |
38 |
25 |
32 |
26 |
31 |
27 |
30 | 我居中啦!
28 |This box is both vertically and horizontally centered. Even if the text in this box changes to make it wider or taller, the box will still be centered. Go ahead, give it a try. Just click to edit the text.
29 |
39 |
51 |
52 | ## HTML 代码
53 |
54 |
55 |
56 | ```html
57 |
40 |
50 |
41 |
43 | 顶
42 |
44 |
46 | 中
45 |
47 |
49 | 底
48 |
58 |
62 | ```
63 |
64 | ## CSS 代码
65 |
66 |
67 |
68 | ```css
69 | .Aligner {
70 | display: flex;
71 | align-items: center;
72 | justify-content: center;
73 | }
74 |
75 | .Aligner-item {
76 | max-width: 50%;
77 | }
78 |
79 | .Aligner-item--top {
80 | align-self: flex-start;
81 | }
82 |
83 | .Aligner-item--bottom {
84 | align-self: flex-end;
85 | }
86 | ```
87 |
88 | 在 Github 中查看这个 demo 中完整的垂直居中组件 [源代码](https://github.com/magic-akari/solved-by-flexbox/blob/master/assets/css/components/aligner.css)
89 |
90 |
91 |
92 |
93 |
94 |
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | const connect = require("connect");
2 | const cssnano = require("cssnano");
3 | const fs = require("fs-extra");
4 | const frontMatter = require("front-matter");
5 | const globby = require("globby");
6 | const gulp = require("gulp");
7 | const he = require("he");
8 | const hljs = require("highlight.js");
9 | const htmlMinifier = require("html-minifier");
10 | const MarkdownIt = require("markdown-it");
11 | const nunjucks = require("nunjucks");
12 | const path = require("path");
13 | const postcss = require("postcss");
14 | const atImport = require("postcss-import");
15 | const cssnext = require("postcss-cssnext");
16 | const serveStatic = require("serve-static");
17 | const { argv } = require("yargs");
18 |
19 | /**
20 | * The output directory for all the built files.
21 | */
22 | const DEST = "./solved-by-flexbox";
23 |
24 | /**
25 | * The base public path of the site.
26 | */
27 | const PUBLIC_PATH = path.join("/", DEST, "/");
28 |
29 | nunjucks.configure("templates", { autoescape: false, noCache: true });
30 |
31 | /**
32 | * Renders markdown content as HTML with syntax highlighted code blocks.
33 | * @param {string} content A markdown string.
34 | * @return {string} The rendered HTML.
35 | */
36 | const renderMarkdown = content => {
37 | const md = new MarkdownIt({
38 | html: true,
39 | typographer: true,
40 | highlight: (code, lang) => {
41 | code = lang
42 | ? hljs.highlight(lang, code).value
43 | : // Since we're not using highlight.js here, we need to
44 | // espace the html, but we have to unescape first in order
45 | // to avoid double escaping.
46 | he.escape(he.unescape(code));
47 |
48 | return code;
49 | }
50 | });
51 |
52 | return md.render(content);
53 | };
54 |
55 | gulp.task("pages", async () => {
56 | const baseData = await fs.readJSON("./config.json");
57 | const overrides = {
58 | baseUrl: PUBLIC_PATH,
59 | env: process.env.NODE_ENV || "development"
60 | };
61 | const site = Object.assign({ demos: [] }, baseData, overrides);
62 |
63 | const processContent = async pagePath => {
64 | const slug = path.basename(pagePath, path.extname(pagePath));
65 | const permalink = site.baseUrl + (slug === "index" ? "" : "demos/" + slug + "/");
66 |
67 | const fileContents = await fs.readFile(pagePath, "utf-8");
68 | const { body, attributes } = frontMatter(fileContents);
69 |
70 | const data = {
71 | site,
72 | page: {
73 | content: body,
74 | slug,
75 | permalink,
76 | ...attributes
77 | }
78 | };
79 |
80 | if (path.extname(pagePath) == ".md") {
81 | data.page.content = renderMarkdown(data.page.content);
82 | }
83 | data.page.content = nunjucks.renderString(data.page.content, data);
84 |
85 | return data;
86 | };
87 |
88 | const renderPage = async data => {
89 | let html = nunjucks.render(data.page.template, data);
90 | if (process.env.NODE_ENV === "production") {
91 | html = htmlMinifier.minify(html, {
92 | removeComments: true,
93 | collapseWhitespace: true,
94 | collapseBooleanAttributes: true,
95 | removeAttributeQuotes: true,
96 | removeRedundantAttributes: true,
97 | useShortDoctype: true,
98 | removeEmptyAttributes: true,
99 | minifyJS: true,
100 | minifyCSS: true
101 | });
102 | }
103 |
104 | const outputPath = path.join(data.page.permalink.slice(1), "index.html");
105 | await fs.outputFile(outputPath, html);
106 | };
107 |
108 | const demoPaths = await globby("./demos/**/*");
109 | for (const demoPath of demoPaths) {
110 | const data = await processContent(demoPath);
111 |
112 | // Add the page data to the site demos.
113 | site.demos.push(data.page);
114 |
115 | await renderPage(data);
116 | }
117 |
118 | const pagePaths = await globby("*.html");
119 | for (const pagePath of pagePaths) {
120 | const data = await processContent(pagePath);
121 | await renderPage(data);
122 | }
123 | });
124 |
125 | gulp.task("images", () => {
126 | return gulp.src("./assets/images/**/*").pipe(gulp.dest(path.join(DEST, "images")));
127 | });
128 |
129 | gulp.task("css", async () => {
130 | const src = "./assets/css/main.css";
131 | const css = await fs.readFile(src, "utf-8");
132 |
133 | const plugins = [
134 | atImport(),
135 | cssnext({
136 | browsers: "> 1%, last 2 versions, Safari > 5, ie > 9, Firefox ESR"
137 | })
138 | ];
139 | if (process.env.NODE_ENV === "production") {
140 | plugins.push(
141 | cssnano({
142 | preset: ["default", { discardComments: { removeAll: true } }]
143 | })
144 | );
145 | }
146 |
147 | const result = await postcss(plugins).process(css, { from: src });
148 | await fs.outputFile(path.join(DEST, path.basename(src)), result.css);
149 | });
150 |
151 | gulp.task("default", gulp.parallel("css", "images", "pages"));
152 |
153 | gulp.task(
154 | "serve",
155 | gulp.series("default", () => {
156 | let port = argv.port || argv.p || 4000;
157 | connect()
158 | .use(serveStatic("./"))
159 | .listen(port);
160 |
161 | gulp.watch("./assets/css/**/*.css", gulp.series("css"));
162 | gulp.watch("./assets/images/*", gulp.series("images"));
163 | gulp.watch(["*.html", "./demos/*", "./templates/*"], gulp.series("pages"));
164 |
165 | console.log(`serving on http://localhost:${port}/solved-by-flexbox`);
166 | })
167 | );
168 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 | ---
2 | template: home.html
3 | ---
4 |
5 | …
59 | …
60 | …
61 |
7 |
17 | 介绍
8 |CSS 长期以来缺乏合适的布局机制。 变形，动画，滤镜，对这门语言来说都很有用，但是都没有解决 Web 开发者长期抱怨的主要问题。
9 | 10 |终于，多亏了 Flexbox 布局，我们有了解决方案。
11 | 12 |这个页面并不是另一个 CSS 框架。主要目的是展示曾经很困难甚至无法单独用 CSS 解决的问题，现在被 Flexbox 布局轻松解决。随着最近释出的 Internet Explorer 11 和 Safari 6.1，最新的 Flexbox 语法已经被每一个的现代浏览器支持。
13 | 14 |检查下边的 demo 。查看浏览器的网页审查工具或者深入 源代码 查看，一旦 Flexbox 成为主流，CSS 布局代码将会变得多么的简单。
15 | 16 |
21 |
38 | 展示
22 |-
23 | {% for demo in site.demos %}
24 |
-
25 | 26 | 27 |34 |
28 | 30 |
29 | {{ demo.title }}
31 | 32 |{{ demo.excerpt }}
33 |
35 | {% endfor %}
36 |
42 |
95 | 浏览器支持
43 | 44 |-
45 |
-
46 | 47 |50 |
48 | Chrome
21+ 49 |
51 | -
52 | 53 |56 |
54 | Opera
12.1+ 55 |
57 | -
58 | 59 |62 |
60 | Firefox
22+ 61 |
63 | -
64 | 65 |68 |
66 | Safari
6.1+ 67 |
69 | -
70 | 71 |74 |
72 | IE
10+ 73 |
75 | -
76 | 77 |80 |
78 | Edge
All 79 |
81 |
注意事项和已知问题
84 |-
85 |
- IE 10 支持 Flexbox 布局，但是当前版本仅支持 Flexbox 的草案版本: (
display:flexbox)。
86 |
87 | - Safari 6 以及更早的版本支持 原始的 Flexbox 语法, 现在已经被淘汰: (
display:box)。
88 |
89 | - Firefox 27 以及更早的版本不支持多行 flexbox 。查看 bug 报告 获得更多信息。 90 | 91 |
- 对于所有浏览器的支持力度，可以查看 caniuse.com/flexbox 92 | 93 |
99 |
111 | 关于代码
100 |该页面的所有关于 Flexbox 解决特定问题的示例。都没有被设计用来解决浏览器的兼容性。一些浏览器不完全支持 Flexbox 布局的最新语法，所以，很遗憾，一些兼容性工作是需要的。
101 | 102 |兼容性工作的代码没有展示在示例中，但是如果你好奇实现的细节，你可以查看源代码。每一个 demo 都有指向其源代码的链接，里边有完整的兼容性代码，以及文档注释，所以不用担心，去看一看吧。
103 | 104 |Flexbox 布局自动化兼容性工具由 autoprefixer 提供。如果你没使用 autoprefixer 来写 Flexbox 代码，那么，你可能会犯一些可怕的错误。
105 | 106 |在示例代码和源文件中使用的类名来自于 SUIT CSS，基于 BEM 方法。每个示例包含的可重用的 CSS 组件允许你复制修改适应你自己的项目。每个示例页面提供了各自组件的链接。
107 | 108 |如果你发现了错误或者想提供一些额外的示例，欢迎在 Github 上开一个 issue 或者提交一个 pull request。
109 | 110 |
114 |
126 | 翻译
115 | 116 |以下翻译由社区热心提供：
117 | 118 | 123 |请注意，翻译并非官方提供，可能随着时间推移而过时。你可以在 Github 上发送一个 pull request 或者 开一个 issue 提供你的翻译内容的链接。
124 | 125 |
129 |
133 | 关于该中文翻译版本
130 |该文档基于 Solved by Flexbox 原始英文版本的 CC-BY 授权协议，由 阿卡琳 独自翻译。
131 |欢迎任何关于翻译或其建议。请在 Github 上给我发送 pull request 或者 开一个 issue
132 |
7 | {% include 'header.html' %}
8 |
9 |
12 |
15 | {{ page.title }}
13 | {{ page.content }} 14 |
2 |
5 | Solved by Flexbox
3 |{{ site.tagline }}
4 |
6 |
13 | 查看项目源代码
14 |
15 |
22 | 告诉大家
23 |
24 |
25 |
--------------------------------------------------------------------------------
/templates/holy-grail.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | {% include 'head.html' %}
4 |
5 |
7 | {% include 'header.html' %}
8 |
9 |
7 | {% include 'header.html' %}
8 |
9 |