flexbox vs 表格，为什么我们需要 flexbox? [英] flexbox vs tables, why do we need flexbox?

问题描述

谁能启发我新的 Flexbox 布局模型如何比当前的表格方式更好?(display:table 和所有这些都包含在我的案例中)?

Can anyone please enlighten me on how the new Flexbox layout model is any better than current tables way? (display:table and all those are includedin my case) ?

它在 IE10 下完全不受支持，这对不久的将来来说不是很好，而且我看不出比表格布局有什么好处.但是，互联网仍然开始充满这种新的 CSS 布局方法的崇拜者"，我看到的所有示例都可以使用普通 css 轻松完成，没有问题.

It's not supported at all under IE10 which isn't very good for the near future, and I just can't see any benefits over table layout. But still, the internet is starting to get full of "worshipers" of this new CSS method of layout, and all the examples I see can be easily done with normal css without problems.

25.12.15 更新:

自从它们被引入现代浏览器并停止使用 display:table 等以来，我一直在使用 flexbox，因为 flexbox 更强大且更易于使用.

Update 25.12.15:

I have been using flexboxes a lot since they were introduced to modern browsers and had stopped using display:table and so on, because flexboxes are more powerful and easy to use.

推荐答案

我能想到使用 flexbox 和使用表格显示值或浮动来布局页面的三个区别:

There are three distinctions I can think of between using flexbox and using table display values or floats to layout a page:

1. 能够在不考虑 HTML 源代码顺序的情况下对元素进行重新排序，同时将元素保持在正常流程中 - 您可以通过使用 order 属性.
2. 与传统的浮动布局相比，它需要的输入更少(您不需要所有伪元素用于清除目的)并且更具语义，而使用浮动或表格进行布局显然不是.
3. 弹性项目根据祖先元素的尺寸增长和收缩以填充水平和垂直空间的能力 - 通过使用 flex-grow 和 flex-shrink 属性.

1. Being able to re-order elements irrespective of the HTML source order, while keeping elements in the normal flow - you can do this by specifying an integer value with the order property.
2. It requires less typing than traditional float layouts (you don't need all of the pseudo-elements for clearing purposes) and is more semantic, while using floats or tables for layouts obviously isn't.
3. The ability for flex-items to grow and shrink to fill horizontal and vertical space based on an ancestor elements' dimensions - by using the flex-grow and flex-shrink properties.

问题(正如您所指出的)是支持仍然很差；事实上，Firefox 仍在实现旧版本的 flexbox 模块，因此您必须考虑语法和行为上的细微差异，具体取决于您使用的浏览器.不过，人们已经说了很多，它是布局的未来，尤其是对于频繁出现的复杂 Web 应用程序.如果您愿意进行不可避免的明智投资，那么值得学习 - 代价是现在无法真正使用.

The problem (as you've pointed out) is that support is still pretty bad; In fact Firefox is still implementing an older version of the flexbox module, so you have to account for minor discrepancies in syntax and behavior, depending on which browser you're using. It has been said quite a bit, though, that it is the future for layouts, especially for complex web apps that are popping up more often. It's worth learning if you're okay with making an inevitably wise investment - at the cost of not really being useable right now.

我还建议你看看这篇很棒的杂志文章对 flexbox 的友好介绍(这是最近写的)

I also suggest you take a look at this smashing magazine article for a friendly introduction to flexbox (it's fairly recently written)

这篇关于flexbox vs 表格，为什么我们需要 flexbox?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！