灵活的盒子模型 - 显示：flex、box、flexbox？ [复制]

Posted 2023-03-05

【中文标题】灵活的盒子模型 - 显示：flex、box、flexbox？ [复制]

【英文标题】：Flexible box model - display : flex, box, flexbox? [duplicate]

【发布时间】：2013-03-17 18:05:56

【问题描述】：

今天，我们中的许多人都知道，在 CSS3 中引入了新的灵活框模型后，display 属性的旧值（如 inline 和 block）已经过时。但是，我们可能会在同一个灵活的盒子模型中在网络上找到不同的信息。

我们可能会发现display 属性的三个不同值，即flex、box 和flexbox。这三种柔性盒模型有什么区别，用哪一种？

【问题讨论】：

胡? display 的新值不会使旧值“过时”。尤其是inline 和block，自从 5000 多年前文字发明以来就需要哪些效果：“继续到行尾，然后创建一个新的，依此类推”和“请每行一个"

CSS-Tricks' article about Flexbox 对你很有用。

【参考方案1】：

您可以使用您需要支持的浏览器。

display: box

火狐2.0？ （前缀） Chrome 4.0？ （前缀） Safari/ios 3.1？ （前缀） android 2.1（前缀）

据我所知，任何浏览器都没有实现通过box-lines: multiple 包装。

display: flexbox

铬 17-?? （前缀） Internet Explorer 10（带前缀）

display: flex - 当前标准

Chrome 21（带前缀）、29（不带前缀） Opera 12.1（无前缀）、15（webkit 前缀） Firefox 22（无前缀） Safari/iOS 7（前缀） 黑莓 10（前缀） Internet Explorer 11（无前缀）

http://caniuse.com/#feat=flexbox（请注意，IE10 是唯一被标记为支持包装的部分支持的浏览器）

flexbox 和 flex 的规范非常相似，没有理由不将两者都包括在内，尤其是因为 IE10 仅支持 flexbox 规范。 box 的规范非常不同，可能不值得包括，这取决于您所追求的效果，即使几乎所有属性都与 flexbox/flex 规范中的类似。

您可能会发现有些浏览器支持多种规格。他们可能会放弃对旧规范的支持，因此请务必确保包含 flex 属性。

【讨论】：

“prefixed”可能是指display: -webkit-flex。所以“无前缀”表示display: flex

caniuse 在资源下提供了许多有用的链接，但其中大多数对 Safari 的兼容性不太了解（bennettfeely 做得对，至少在当前列表中与此处的列表相同标准）所以我想知道他们对其他浏览器的正确程度。

【参考方案2】：

据我所知，以上三个不同版本的软盒模型可以按照年龄来分类。

display: box - 这是第一个灵活的盒子模型，在 2009 年左右被接受为最新模型。不要使用它。

display: flexbox - 这种灵活的盒子模型于 2011 年问世，目前仍在开发中。不要使用它。

display: flex - 这是最新的柔性盒子模型，目前已成为最新的盒子标准。这可能会进一步发生一些变化，但这比其他两个标准更受欢迎。

【讨论】：

事实上，其他两个版本已经不能真正被视为“标准”，因为最新版本完全取代了它们。

display: -webkit-box 今天仍然被新网站使用，因为它是 -webkit-line-clamp 工作的唯一方法，也是使元素具有最大行数的唯一方法文本。