内容
我们所有人都必须采取各种变通办法来进行布局。我们使用了用于表格/关系数据的表格。我们使用了传统上使用的浮点数，以便文本可以环绕浮点数。我们使用了定位（可以说是布局），但没有提供快速，轻松地创建复杂布局所需的功能和灵活性。现在，我们有了Flexbox。
- 下载本教程的支持文件
Flexbox是CSS Flexible Box Layout Module（CSS灵活框布局模块）的昵称，它为我们提供了一种快速，轻松地布局用户界面以及其中各个元素的方法。网格布局规范是页面布局的更好解决方案，但仍在开发中。
相反，较新的浏览器很快就支持Flexbox。为了找出确切的浏览器以及所支持的语法（本教程仅侧重于新语法）以及使用哪些前缀，请参考“我可以使用...”，它提供了比此处更详尽的兼容性概述。
Flexbox解决什么问题？
Flexbox使我们能够确定如何使用元素中与子元素相关的元素中的可用空间。例如，如果您有一个“柔性盒布局模块”（又名Flexbox），则是该块上的新CSS规范，有望彻底改变UI布局。斯蒂芬·海伊（Stephen Hay）展示了如何为一个虚构的应用程序创建布局，该应用程序的宽度为600px，该容器又有三个子级，每个子级为100px，那么您就有300px的可用空间。
Flexbox为您提供了处理此空间的工具。您是否希望将其平均分配给孩子们，使他们都更宽以填充该空间？您是否愿意允许一个孩子接收所有可用空间？还是您宁愿在元素之间均匀地放置该空间？
使用Flexbox在水平和垂直方向上解决这些问题都是微不足道的。是的，这确实意味着最终可以在水平轴和垂直轴上将元素完美居中。 Flexbox还提供了更多好处，例如更改演示顺序与源顺序。
由于Flexbox解决了布局问题的性质，因此很容易看出它如何适合于创建UI布局。工具栏，选项卡，表单和类似的组件很容易与此一起进行布局。
为了感受一下Flexbox的功能，您可以在自己的项目中进行尝试，我们将为虚构的文本消息应用程序创建一个布局，类似于在典型的Android上可能会找到的UI电话。尽管这没有实际目的（您将没有可用的应用程序），但它说明了完成所有基本样式后，可以很快地创建这样的布局。
潜入！
选择支持最新Flexbox规范的浏览器。无论选择哪种浏览器，都必须使用适当的供应商前缀。此处提供的示例均不含这些示例（本教程的可下载代码使用WebKit前缀）。
让我们先尝试一些简单的事情。在文本编辑器中键入以下框架文档，然后在浏览器中将其打开：
！DOCTYPE html> html> head> meta charset =“ utf-8”> title> Flexbox教程/标题> meta name =“ viewport” content =“ width = device-width，initial-scale = 1”> style>部分{边框：1px纯灰色；填充：1em； } div {width：50px;高度：50px；边框：1px实心钢蓝； } / style> / head> body> section> div> / div> div> / div> div> / div> div> / div> div> / div> / section> / body> / html>
我们这里有5个div，每个50像素平方。它们是块级元素，因此显示。在里面 风格 文档中的元素 头，向中添加一个附加声明 部分 规则：
显示：flex;
请记住在 柔性 属性（如果您的浏览器必要）。就我而言，我正在使用 显示：-webkit-flex;.
我们已经将 部分 放入“柔性容器”中flex容器中的元素是 弹性物品 并遵守Flexbox的规则，除非通过绝对定位等方法退出世界。
注意在浏览器中查看页面时会发生什么。元素看起来好像已经浮动了，没有折叠的父容器的麻烦。 Flexbox的默认设置是与 弹性方向 属性设置为 排，表示水平。 flex-direction：列 将垂直显示元素，就像它们显示为 显示：块。作为默认值 弹性方向 已经 排，我们无需在此处指定。
现在我们已经有了一个简单的示例，您可以进行一些操作。
水平和垂直居中
设置 高度 的 部分 到400像素，这样您就可以更好地了解发生了什么。更好的是，通过将以下内容添加到 部分 风格：
高度：400px；证明内容：中心； align-items：居中;
当。。。的时候 弹性方向 是 排，则水平轴称为“主轴”。垂直轴称为“交叉轴”。当以下情况相反 弹性方向 是 柱子. 证明内容 处理沿主轴的对齐（对齐），而 对齐项目 处理沿横轴的对齐方式。通过将两者居中，我们最终获得了真正的中心。
自动边距
让我们看看自动页边距的工作原理。添加以下规则：
div：last-child {margin-left：auto; }
处理可用空间
刷新。当您看到此信息时，您可以想象如何在无需额外标记的情况下轻松解决各种与菜单和选项卡相关的布局。现在，一些“ flex”怎么样？去除那个 div：最后一个孩子 规则，然后将以下内容添加到 div 规则：
flex：1;
这将占用flex容器中的剩余空间，并为每个div分配一个相等的部分。但是，如果我们希望最中心的div接收到可用空间的两部分，而其他每个接收到一部分，那该怎么办呢？
div：nth-child（3）{flex：2; }
您也可以将上述规则更改为 弹性：1 到该div，并完全删除 柔性 从其他。这样一来，除最中心的div外，所有div均为50像素-这样一来，它将占用所有可用空间。
您可以在项目之间放置可用空间，而不是将其添加到其宽度。去掉 柔性 从div更改值 证明内容 在 部分 元素：
显示顺序与来源顺序
如何弄乱显示顺序与源顺序？将字母A，B，C，D和E分别添加到每个div中，以便您可以按照显示顺序进行操作。
所有项目的默认顺序为0，这表示它们遵循源顺序。调整该值会更改弹性项目相对于源顺序的显示顺序。试试这个：
div：nth-child（4）{顺序：-1； }
同样，如果需要，请不要忘记使用前缀。看到包含字母D的div（应该为第四）现在如何显示为第一项？怎么样呢：
div：nth-child（2），div：nth-child（4）{-webkit-order：1; }
由于源顺序默认为0， 顺序：1 将B和D放在最后。放置后，它们将继续遵循自己的源顺序（B在D之前）。
如果您是Flexbox的新手，那么这是很多新信息。想一想，这些只是其中的几种可能性！我强烈建议您阅读规范以了解更多信息。
一个简单的应用程序用户界面
现在，让我们看一下Flexbox在现实世界中的UI布局情况下可能如何帮助我们。只是为了踢球，我们将一个小的消息传递应用程序UI组合在一起。通过查看最终结果，您可以快速设计通常用于完成此布局的策略。
在下面的练习中，您会看到，通过首先关注结构化内容和基本的UI样式，您可以随后“紧贴”一些Flexbox并将其完成。尽管这些类型的UI总是需要使用一定数量的CSS，但您会发现Flexbox仅将其中的一小部分用于布局。
首先，再次从骨骼开始。这次，我用这个特定应用程序屏幕的基本结构和内容来填充它：
！DOCTYPE html> html> head> meta charset =“ utf-8”> title> Flexbox教程/标题> meta name =“ viewport” content =“ width = device-width，initial-scale = 1”>链接rel =“ stylesheet“ href =” normalize.css“>链接rel =” stylesheet“ href =” style.css“> / head>正文>标头> div> h1> Thomas表/ h1> p> +31 6 555 55 555 / p > / div> ul> li> a href =“＃”> span> Call / span> / a> / li> li> a href =“＃”> span> Delete Messages / span> / a> / li> / ul> / header>部分>部分> h1> 2013年7月19日/ h1> div> div> / div> p> 09：57 / p> > div> div> / div> p> 10：03 / p> blockquote>是的，无论如何。我只是希望表格布局能回来./blockquote> / div> div> div> / div> p> 10：09 / p> blockquote>我要取消婚礼./blockquote> / div> / section> /部分>表单>输入type =“ text”占位符=“输入消息”>按钮>跨度> / span> span>附加文件/跨度> / button> / form> / body> / html>
请注意，我链接到了normalize.css，这确实是Nicolas Gallagher的项目，并使用一些明智的规则来创建跨浏览器更可预测的竞争环境。如果您选择的元素不同，请不要太担心；它们只是作为示例Flexbox代码的载体。
但是，请暂停并在浏览器中查看此页面。如果我们仅能为该应用程序屏幕提供纯HTML，这就是用户会看到的内容。它不是很漂亮，但是如果有适当的后端，它将完全可以使用。
另外，我们将使用仅包含少量字形的图标字体，这是我使用IcoMoon制作的。我鼓励您自己键入各种代码，但是我使用的所有文件都可以下载。
我不会向您介绍UI本身的所有非布局样式。我已在教程下载中为您提供了一个文件： 样式01.css。只需添加...
链接rel =“ stylesheet” href =“ styles / style-01.css”>
…到文档的开头，然后在浏览器中签出。您可以看到样式看起来正确–但是我们实际上并没有对布局做任何事情。
除了工具栏中的两个图标外，几乎所有其他内容现在都显示为 内联块，只需使用浏览器的默认设置即可。在大多数情况下，它们只是块级元素。
通过添加相对少量的CSS，我们可以按预期完成布局。我将引导您完成每条新规则，然后将其添加到 样式01.css。为了真正了解正在发生的事情，您可能需要在每个步骤中保存并刷新页面。
正文，标题，.message，.toolbar，表单{display：flex; }
这将这五个元素中的每一个都变成了弹性容器，在大多数情况下，弹性容器已经开始为我们解决布局问题。
但是，由于 弹性方向 默认为 排。我们希望某些元素具有这种结果，而不是整个屏幕都希望得到-应该垂直显示。让我们来解决这个问题：
body {flex-direction：column; }
我们去了！这开始看起来像我们想要实现的目标。我们希望在底部的文本输入字段中水平占据所有额外的可用空间：
输入{flex：1; }
接下来，我们使用Flexbox的宏伟的自动边距将两个图标向右移动。我们将它们垂直居中：
.toolbar {margin-left：auto; -webkit-align-items：center; }
在这种情况下，我们的 身体 是高度为100％的伸缩容器。我们可以利用此优势，因为我们希望UI的messages部分占用任何额外的垂直空间：
.messages {flex：1;溢出：自动； }
如果有更多的消息超出消息区域的容纳范围，则溢出将使用户可以滚动此部分。
.time {位置：绝对； }
我们通过绝对定位来消除典型挠曲特性的时间，这只是这些元素的简便方法。您不仅限于Flexbox；您可以针对特定情况使用最佳定位模型。
.from-me {justify-content：flex-end; } .from-me blockquote {顺序：-1;右边距：2em； } .from-me .time {底部：-2.5em;右：4em； }
上面的规则使用Flexbox更改来自应用程序用户的消息中元素的显示顺序，而不是与他们正在发消息的人相对，然后将这些元素放置在屏幕的右侧。最终，时间被相应地定位。
剩下要做的唯一一件事就是固定用于联系人消息的元素的位置，这甚至不需要Flexbox：
.from-them blockquote {margin-left：2em; } .from-them .time {bottom：-2.5em;左：4em; }
就是这样！此处仅使用八个特定于Flexbox的属性或值，并与非常基本的CSS结合使用，它们使我们能够以相当简单的方式创建此屏幕。布局是流畅的，因此可以在各种视口宽度下工作。
后备和兼容性
您可能知道，也可能没有意识到，Flexbox在过去的几年中发生了一些语法变化。您可能想知道如何将所有这些语法组合成一堆CSS，这些CSS在大多数浏览器中都可以使用浮点数和 显示：表 作为后备。
如果你想尝试，你有我的祝福。在这里，我不会提倡跨语法授粉。但是，请不要只是简单地说，“由于缺乏浏览器支持，我们不能使用Flexbox，这太糟糕了”。浏览器支持正在迅速增长。
我建议您仅使用新语法-除非您具有基于Flexbox的旧版UI（我建议您直接重写），否则这是唯一真正相关的语法。如果您希望使用Flexbox实现的效果至关重要，则建议您先在没有Flexbox的情况下创建效果，然后在CSS中的这些规则下实施Flexbox解决方案。这样，您就向前倾倒而不是向后倾倒。但这是您的网络，而您是老板，所以对您的工作流程，客户和用户有意义的事情也要做。
向前弯曲！
Flexbox是Web布局的巨大飞跃。尽管它不能解决所有布局问题（例如页面布局和网格），但它使许多以前令人沮丧的布局问题变成了琐碎的练习。我鼓励您使用Flexbox并在可能的地方使用它！
字： 史蒂芬·海
加利福尼亚本地人Stephen Hay通过自己的用户体验咨询公司Zero Interface在荷兰生活和工作，担任网站设计和开发策略师。本文最初发表在《网络》杂志第246期。
