css flexbox模型_Flexbox模式：终极CSS Flexbox代码库

最新CSS flexbox属性从根本上改变了开发人员创建界面的方式。 不再需要浮动广告和CSS hack即可使布局完美对齐。 无需再担心用于处理多列布局的自定义响应技术。

但是，即使flexbox解决了许多问题，学习起来也很复杂。 为了帮助您入门，有一个名为Flexbox Patterns的新在线库，该库将许多不同的flexbox元素分类到一个中央位置。

该库完全免费使用，并且在GitHub上开源 。 所有示例都可以通过NPM或GitHub 在本地下载 。 但是您也可以通过网站浏览示例，以根据需要复制和粘贴代码。

每个模式都有其自己的页面，该页面带有简短描述和代码示例。 您可以从字面上完全复制代码并将其粘贴到现有的Web项目中 ，尽管建议您首先了解一些代码的用途以及使用原因。

以使用Flexbox并排对齐顶部导航栏中的所有元素的网站标题栏演示为例。

通常，这需要浮点数和clearfix类来使所有内容正确对齐。

使用flexbox，您可以使用display：flex属性将所有内容保存在一个容器中。 这样，您可以定义元素之间的交互方式以及flexbox 在较小屏幕上的操作方式 。

模式会不断更新，当前库集中在最常见的元素上，例如标签 ， 侧边栏和垂直/水平居中 。

如果您是Flexbox的新手，那么一定要查看Flexbox模式 。 该网站不会教您Flexbox的所有基础知识，但会提供您可以修改自己的Web项目的实际示例。

翻译自: https://www.hongkiat.com/blog/flexbox-patterns/