有人问我如何用图标创建简单的导航栏。 这是一种非常简单的布局，可以用很多不同的方式实现。 列表项作为内联块在一般情况下可能最合适。
但我一直在享受使用 Flexbox 的乐趣，所以我决定用它来做这个，我认为它是一个很好的教育示例。
它就在这里
查看 CodePen 上的 使用 Flexbox 和 SVG 图标的导航栏，作者：Chris Coyier (@chriscoyier)，发布在 CodePen 上。
Flexbox 使您能够轻松地以您想要的方式对齐项目
Flexbox 使您能够轻松地让菜单项占据它们所需的尽可能多的空间，而无需指定任何确切的数字
但如果您想要应用确切的数字，您可以
Flex 项可以换行，属性可以随媒体查询而改变
Flex 项易于以您想要的方式对齐，即使是垂直对齐，即使是居中对齐
在演示中，您可以随意开启轮廓，以查看框如何对齐。
我知道并非所有人都可以在他们所做的一切工作中使用 Flexbox。 巴拉巴拉浏览器支持、客户等等。 有些人可以在某些项目中使用它。 在用它完成像这样的事情后，我认为它变得越来越重要了。
有没有解决方法能让它在 IE 8/9 中工作？ 我真的很想用它，但我知道很多地方还在使用老版本的 IE。
我开始把布局看作是拥有良好浏览器的最终用户的奢侈品，而不是必须满足所有最终用户的需求。
网站应该仍然在所有浏览器中正常工作，因为这是提供良好可访问性的基本要求。 然而，我把老版本的浏览器看作是用户失明了：内容仍然应该具有逻辑的从上到下的顺序，但我甚至不尝试让它们在老版本的浏览器中看起来赏心悦目。
Ron –
我非常喜欢这种模式。 我也开始这样想了。 如果你想要你的网络体验很棒，那就下载一个很棒的浏览器 ;)
我不同意。 很多用户是从公司的电脑访问网站的，如果你曾经在一家大公司工作过，你就会知道他们通常落后于最新版本两三个版本。 所以，如果你持“忽略使用老版本浏览器的用户”的态度，就会失去很多潜在的客户，或者说网站的目标用户。
但最重要的是，在我看来，首先看看统计数据，了解你的访问者是什么样的，然后再创建一些只有很少访问者才能看到或使用的花哨功能。 :)
顺便说一句，Chris，这篇文章很棒！
Jugge
在我看来，采用 Ron 提出的“......最终用户的奢侈品”理念，并为拥有功能强大浏览器的用户提供增强体验，并不意味着“忽略使用老版本浏览器的用户”。
我喜欢这篇文章。
是的，我知道我不应该写忽略最终用户，但是网络设计中很多困难的地方在于要迎合不同的浏览器。 我认为值得付出额外的努力，让那些使用不太幸运的浏览器（指 IE）的用户仍然可以享受酷炫的东西，并在可用性等方面享受增强的功能。
我的解决方案在 IE9 上有效，但回退在 IE8 上无效。
实际上，这些浏览器的默认值应该只是 100% 的宽度。 他们没有布局选项。
我最终会更新我的 Sass 代码，以迎合所有浏览器。
Jugge
我想问题在于，这些增强功能值不值得。 通常，它们需要额外的 CSS 和 JS 才能正常工作，这会增加页面大小。 这会减慢已经缓慢且效率低下的浏览器的速度，或者最坏情况下会减慢所有浏览器的速度。 所有这些都是为了给用户提供他们可能在其他地方都看不到的功能。
如果我们将性能作为整体用户体验的一部分来考虑，那么用黑客技术来拖慢网站的速度，实际上不是在提升体验，而是在降低体验吗？
增加几 KB 不会伤害任何人。
非常酷。 我很喜欢你在教程中使用 GIF 的方式。
这是一项很棒的工作。 谢谢分享。
非常实用的技巧，我认为用它设计包含多个栏的页面很容易。
我们最近使用 Flexbox 实施了类似的导航。
http://christophercooper.com.au/letters/regarding-prayer-flags/
首页上使用了它，有两层
http://christophercooper.com.au/
我最近在我的一个新的 CSS Grid 中使用了 Flexbox（欢迎发表意见），我喜欢 Flexbox。 它比浮动元素、display: table-cell 和常用的 12 列网格 css 规则更合理。
如果你早点看到你创建的这个小工具，它会对我很大的帮助！
至于浏览器支持（我还需要解决这个问题），我个人只对每个供应商的最近两个版本感兴趣。
你知道，每次我看到 Flex 的示例时，我都会感到很兴奋，因为这确实是 CSS 的一次重大演进。 然后我不得不提醒自己，我可能只能在我的 1% 的客户项目中使用它，我就会有点沮丧。 总有一天，微软会强制自动更新 Internet Explorer；然后，我们就能在其他所有人都使用 3 年以上的时间之前使用像 Flexbox 这样的激动人心的新标准。
我和你一样。 我当时想，“天啊，这是我见过的最干净的导航栏布局，但是，我可能要到明年才能用，也许......”
虽然它不适合所有人，但 Flexbox 在定位方面确实很灵活。 我在我的部分工作中使用了它，并添加了一些 IE 的解决方法。
顺便说一句，你的文章排版非常吸引人。 谢谢分享。
css-tricks 上有没有关于 SVG 的教程/文章，就像这篇文章中使用的那样？ 我是 SVG 新手，我从未见过 SVG 像这样使用过，我很好奇它是如何实现的。
看看这个：https://css-tricks.org.cn/svg-tabs-using-svg-shape-template/
我一直在进行这个 Sass 实现，它可以设置一个带有浮动回退的 Flex 网格。
尚未完全完成，我的 Sass 可以改进。 工作仍在进行中。
基本上将代码分成单独的 Sass 文件
除非你想进入我的混乱世界，否则不要看 B 和 C 中的代码。 :D
现在只需实现最后一节块“D”，与你的父类和子类相匹配。（可能值得看看 HTML 的结构，因为我正在处理它）
终于有了一种更好的方法来制作 CSS 布局。
Flexbox 看起来很棒！ 但作为一个试图在该领域找到工作的初学者，我总是听到人们说要让网站跨浏览器兼容？ 有没有人使用 singularity.gs，位于 https://github.com/Team-Sass/Singularity，我看到它提供了很多选项，因为它不会浮动或推动任何东西。 你可以重新排列标记的视觉源顺序，但我是一个新手，正在学习这些东西。 我想问一下，因为 Chris 让我开始学习 Compass 和 Sass。
再想想，在折腾这个网格系统后，你应该听克里斯的建议，不要过度思考网格。迫不及待地想了解更多关于 Flexbox 的知识！
很棒的演示，谢谢 Chris。
我正在尝试实现以下布局，但遇到了困难。
<li> 元素需要具有相同的高度（由最高的元素设置），但每个 <li> 内部的 <a> 需要垂直居中，同时仍然覆盖整个 <li> 的区域。
这可以实现吗？
是我写信询问导航栏的。这是我最终的实现方式：http://myvegancookbook.com/testground/recipe.php?id=136。我还有几处小细节需要完善。它是响应式的，当浏览器缩小时会发生变化。我决定不使用 Flexbox，因为仍然有太多访问我网站的用户使用的是旧版浏览器。我不知道它看起来怎么样，因为我对这些东西还比较陌生。
我一直很渴望学习 Flexbox，事实上，我可以想到几个项目，如果使用 Flexbox，我的生活可能会变得容易很多！什么时候开始使用 Flexbox 是合适的？我想不会太久，所以也许现在是开始深入研究它的好时机！
感谢 Chris 提供了很棒的演示，你是先驱者！
我最近开始使用 Flexbox，我喜欢它可以做的事情。如果你提供回退，现在就可以在许多用例中使用它。如果你只需要支持 IE8 及更高版本，Flexbox 的许多行为都可以通过 display: table 轻松复制。在接下来的几年里，当我们不再需要支持这些荒谬的过时浏览器时，这些 IE 回退可以轻松删除。
在“但是表格是邪恶的”评论开始之前，你只是在告诉它像表格一样表现。你认为 IE8 用户会仔细查看源代码以确保所有东西在现代术语中都是语义化的吗？无论如何，我建议阅读 http://gregsutphen.com/DOCS/CSS/EverythingYouKnowAboutCSSisWrong.pdf，如果你仍然对 CSS 表格有顾虑。我已经得出结论，使用浮动进行网站布局比使用 display: table 更像是一种 hack。
我想开始使用 Flexbox，而且我也很喜欢它。我该如何开始学习？你能帮我吗？
嘿 Chris,
我认为我们甚至可以针对更好的响应式设计优化字体大小。我会尝试使用 Flexigrid。
我最近一直在为一个个人项目研究 Flexbox，我认为我会抓住这个机会使用它们，因为旧版 IE 占我访客的比例很低（< 3%），这将是一个尝试新事物的绝佳时机。
我们对客户采取这种方法，我们会分析数据并使用访客支持的元素构建代码库。
Flexbox 的实现非常棒。我一直在处理列表项之间的间距，以及在不知道项目数量和宽度的情况下如何将整个菜单居中。我只是想知道 Flexbox 在浏览器中的支持情况。现在，它在主要浏览器中没有得到完全支持，这是一个缺点。
Chris……你用于标签导航的图标字体怎么了？使用最新的 FF，我只看到搜索显示“m”。主页显示一个奇怪的方形东西，论坛 = “9”；代码片段 = “Q” 等等？我讨厌原本正常工作的东西突然就停止工作了——没有明显的理由（就像当 FF 在我不知情的情况下自动更新并破坏某些东西——或者几乎每次 Google Earth “更新”都会破坏其他东西）。你有没有在后台用 WP 升级之类的操作做过什么？
另外，你有没有注意到：在最新的 FF 中，点击四行评论中的“预览”选项卡，会显示“combombulating preview”大约 7 秒，然后才能显示——然后当你导航回写入（例如，查找错误）时，没有光标，因此你无法进行更新。你怎么看？这是 FF 浏览器后台更新中的问题——还是代码中的某个地方出了问题？
不错，但我同样需要考虑到使用 IE8 的用户，只要人们还在使用公司电脑或任何运行 XP 的电脑，他们就只能使用 IE8……如果他们没有切换到 Firefox 或 Chrome 的知识，那么你就有可能疏远潜在的客户/访问者。