【问题标题】：What are the main advantages of using flex style in CSS?在 CSS 中使用 flex 样式的主要优点是什么？
【发布时间】：2014-08-13 17:48:42
【问题描述】：

当我阅读有关 HTML 和 CSS 的新变化时，我开始了解 flex 样式，例如 -webkit-flex.

使用 flex 而不是带有媒体标签的普通 div 方法来实现响应式样式的唯一优势是什么。

我几乎没有见过任何使用 flex 来提高响应能力的网站。

【问题讨论】：

“我几乎没有看到任何网站使用 flex 来提高响应速度。”那是因为还没有足够广泛的支持。 “带有媒体标签的普通 div 方法”是什么意思？几乎每个响应式设计都以某种方式使用媒体查询，并且您总是在使用 CSS 布局页面之前使用 div 或 HTML5 语义元素来构建页面。
@BoltClock 唯一不支持 flexbox 的浏览器是 Internet Explorer 10-、Safari 6- 和 4.4 之前的默认 Android 浏览器。即旧浏览器
@Azrael：Firefox 的支持仍然不完整，而 IE11 几个月前才刚刚发布——对于许多网站来说，这还不足以开始使用 flexbox。话虽如此，现在是 2014 年将是开始使用它的绝佳时机。
我觉得这是题外话，因为它太宽泛了，可能有无数的可能性，而且我们使用的每个属性，总是有利有弊......所以你应该而是自己研究并找出优缺点

标签： html css flexbox

【解决方案1】：

我几乎没有见过任何使用 flex 来提高响应能力的网站。

Source 来自 CanIUse

CSS 灵活框布局规范处于候选阶段推荐阶段，并不是所有的浏览器都实现了。网络套件实现必须以 -webkit 为前缀； IE浏览器实现旧版本的规范，前缀；歌剧 12.10 实现规范的最新版本，无前缀。见每个属性的兼容性表，以获得最新的兼容性状态。

弹性盒子

新的 flexbox 布局模式准备重新定义我们在 CSS 中进行布局的方式。不幸的是，该规范最近发生了很大变化，因此在不同的浏览器中实现方式不同。周围有很多过时的 flexbox 资源。

Flexbox 有许多令人兴奋的功能，因为它

可以按任何流动方向（向左、向右、向下，甚至向上！）布置
可以在样式层反转或重新排列显示顺序（即，视觉顺序可以独立于源和语音顺序）
可以沿单个（主）轴线性布局，也可以沿辅助（交叉）轴缠绕成多条线
可以“调整”它们的大小以响应可用空间
可以相对于它们的容器或彼此对齐
可以沿主轴动态折叠或展开，同时保持容器的横向尺寸。

旧盒子模型的问题

考虑以下代码用于三列布局。

.col {
    width: 33.33%;
    padding: 0 5%;
}

这实际上不会为您提供33.33% wide 的列，它会创建43.33% wide. 的列这将破坏3 列布局，因为列的组合宽度超过100%。换句话说，填充被添加到已经存在的宽度上。所以它是 padding + width。

如果您需要创建 3 列布局，您通常使用浮动（或内联块），然后确定必要的宽度、填充和边距，以便它们适合父容器。最好避免做大量不必要的工作，即使它现在已成为第二天性。

找了一个很好的教程来说明Flexbox的实现现状here。

CanIUse 的已知问题

Firefox 不支持以百分比指定宽度。 See bug。
根据草案规范，截至 2013 年 9 月，flex 的 IE10 和 IE11 默认值为 0 0 auto (see here)，而不是 0 1 auto。
Firefox 不支持 flex-wrap、align-content 属性。 See bug
在 IE10 和 IE11 中，如果容器具有 min-height 但没有明确的 height 属性，则具有 display: flex 和 flex-direction: column 的容器将无法正确计算其弯曲子项的大小。 See bug。
在 Chrome 和 Safari 中，（非 flex）子项的高度不能以百分比形式识别。但是 Firefox 和 IE 会根据高度百分比识别和缩放孩子。

参考文献

【讨论】：

在我看来不好的例子，你的第一个问题的解决方案是使用box-sizing: border-box

【解决方案2】：

什么是弹性盒？

W3C specs 中所述的 Flexbox 定义：

该规范描述了针对用户界面设计优化的 CSS 框模型。在 flex 布局模型中，flex 容器的子级可以在任何方向上布局，并且可以“伸缩”它们的大小，要么增长以填充未使用的空间，要么缩小以避免溢出父级。孩子的水平和垂直对齐都可以很容易地操作。这些框的嵌套（水平内垂直，或垂直内水平）可用于构建二维布局。

值得注意的是，一旦将 flexbox 定义为 flex 容器，flexbox 不仅仅是一个属性，而是具有一组属性的整个模块，这些属性会影响父元素（通常是某种包装器 div）内元素的流动和定位。这是通过使用display: flex 完成的。

flexbox 上的资源：

优势

Flebox 允许我们在更改屏幕尺寸或设备方向时更好地控制框/div/页面元素的对齐和行为。

没有flexbox，实现灵活布局的方法有：

浮动 - 基本上是一种 hack，因为它最初的用途是允许部分内容更改位置而不将它们从文档流中移除（即围绕文本定位图像）。它们主要用于水平堆叠，通常与媒体查询和clearfix hack 结合使用。
大小的相对单位（% 或 em） - 在大多数情况下，水平布局效果很好，但对垂直对齐没有或几乎没有控制。
媒体查询 - 与上层技术结合使用 MQ 是 RWD 的主要内容，但在更复杂的情况下往往会变得混乱，因为每个查询都必须包含影响大小和位置的所有属性我们要调整的元素（宽度、高度、填充、边距、显示等）。
javascript - 根据其他变量动态更改元素属性。也是 hacky 解决方案，通常不是很干净，对页面大小和性能征税，并且明显依赖于 JS。

Flexbox 在某种程度上是上述方法的“简写”组合，但也具有三个明显的优势：

根据可用空间设置灵活的元素宽度/高度
垂直和水平居中都没有任何技巧和变通解决方案
在不影响标记和文档结构的情况下更改布局内元素的顺序（使用order 属性或flex-flow）。

有关更具体的示例，请查看此答案末尾列出的链接。

语法和浏览器支持

随着时间的推移，各种浏览器的 flexbox 语法发生了一些重大变化，这些变化在 this article 中得到了很好的解释，但随着 autoprefixer 等前缀工具的广泛采用，我们可以坚持使用最新的标准语法并自动添加前缀 ( autoprefixer 提供了选项来定义我们想要在浏览器支持方面回溯多远）。

也就是说，除了 IE 9 和更低版本之外，所有主流浏览器都支持 flexbox。 Opera 从 12.1 版开始支持 flexbox，并且不支持 Opera Mini（真是令人震惊）。对于许多现有网站，使用 flexbox 可能意味着大量工作，但收益有限，但随着 IE 8 和 9 使用量的下降，flexbox 的实现将会增长。

何时以及如何使用？

正如所指出的in this article flexbox 并不是用来创建完整页面布局的（为此目的，css grid 模块目前正在工作中并且很有趣，仅受 IE 支持），而是用于操作较小的单个组件比如导航和侧边栏元素。

现在，您可能可以通过 Modernizer 检测支持并回退 IE lte 9，或者通过坚持通用工作基础并扩展它们以在可以处理它的浏览器上提供更好的体验（我会推荐后者）。与往常一样，这将取决于特定的项目要求和访问者资料是否应该使用 flexbox。

使用示例

我没有任何使用 flexbox 的真实示例，但这里有一些使用 flexbox 可以轻松解决的用例链接：

【讨论】：

【解决方案3】：

FlexBox 的最佳或最大优势在于灵活性以及浏览器会为我们计算大部分事情的事实，只需最少且简单的设置或编码。

如今，大多数网站都使用float 进行设计，但这实际上只是一种技巧，因为浮动应该只是一种用文字包围图像的方式，就像在任何报纸上一样。但它变得如此正常，以至于我们认为它是规则。就像网页设计师使用表格进行设计一样；它不应该是为了那个。

使用 FlexBox，您可以轻松地“真正地”制作 Faux Columns，您可以设置一个（或多个）固定列和另一个（或多个）灵活的列，而无需使用溢出之类的技巧 -浮动组合——它很好地处理了可用空间——你可以通过改变一个数字来重新排列元素的顺序——这将非常酷并且与RWD结合使用非常有用——甚至可以在不使用a的情况下证明内容的合理性针对不同场景的大量 hack（display:inline-block、float 和 translate 等）。

所以我们最终真的没有什么新东西可以做，因为多年来我们已经找到了很多方法来处理/破解我们的需求，但是有了 FlexBox 我们将拥有一个特定的工具以适当的方式完成大多数sick技术。我认为一个很好的例子是我们在过去用四个divs 完成圆角，而今天我们只使用border-radius。所以，最后，我们可以节省时间并获得更简洁的代码。

我认为（希望？）今年我们将看到 FlexBox 的使用量显着增加，因为 XP 的终结 就在这里，IE8 将会消亡——而且我认为用户将升级到另一个带有 IE10/11 的 Windows 版本。

【讨论】：

【解决方案4】：

我想说灵活框布局模块的主要优势在于它可以为您计算所有内容。您不需要计算一个元素将占用多少空间以及边距、填充等。它会自动完成。

【讨论】：

【解决方案5】：

标准用户界面组件集
远程处理（通过传输与 Web 服务交互的能力类型的对象）
比当时的 HTML/CSS 更好的皮肤和样式工作流程
用于数据可视化的高效矢量图形（图表、图形、等）

【讨论】：

【解决方案6】：

非常适合在电子商务网站或基于书店等产品的网站上列出。假设您有 600x600 像素的展示区域供您列出的产品使用。由于产品图像内部，水平或垂直，每个产品框都有动态宽度。 Flex 将这些盒子排列得非常好，它会将不合适的盒子放在下面并排列剩余的盒子宽度和高度。

对于浏览器支持，w3schools 状态

box-flex 属性仅受 Opera 支持。

Internet Explorer 10 支持另一种选择，即 -ms-flex 属性。

Firefox 支持另一种选择，即 -moz-box-flex 属性。

Safari 和 Chrome 支持替代方案 -webkit-box-flex 属性。

注意：Internet Explorer 9 和早期版本。

【讨论】：

W3C 文档浏览器是否支持？一个参考链接会很好。
请不要参考 W3Schools，它非常不准确。在这种特殊情况下，没有任何提示是规范的过时版本。

【解决方案7】：

我浏览了一些帖子，我选择了来自 Chris Coyier 的 CSS-Tricks 的“使用 Flexbox”。 http://css-tricks.com/using-flexbox/ 这篇文章详细介绍了如何让 Flexbox 在尽可能多的浏览器中工作。在浏览器支持子标题下，它为我们提供了支持的浏览器列表，显然，带有警告，'如果你做所有这些编织，你可以获得'：

铬火狐苹果浏览器歌剧 (12.1+) IE (10+) iOS 安卓

如果我们要为不支持 Flexbox 的浏览器构建布局，我们必须以过去的方式迎合它们。从技术上讲，这就是我们目前的工作方式：使用百分比、ems 和浮点数与媒体查询相结合来创建适用于多种设备的灵活布局，不仅包括我们今天使用的智能手机和平板电脑。

【讨论】：