当前位置: 首页 > 面试题库 >

flexbox vs表,为什么我们需要flexbox?

洪鸿博
2023-03-14
问题内容

任何人都可以请我 启发 一下新的Flexbox布局模型比当前表格更好的方法吗?( display:table和所有这些都包含在我的案例中 )?

IE10根本不支持它,这在不久的将来不是很好,我只是看不到表格布局有任何好处。但是,尽管如此,互联网仍然开始充满这种新的CSS布局方法的“崇拜者”,而且我看到的所有示例都可以使用普通的CSS轻松完成而不会出现问题。

15年12月25日更新:

自从Flexbox引入现代浏览器以来,我就一直在使用它们,并且已经停止使用display:table等等,因为Flexbox功能更强大且易于使用。


问题答案:

我可以想到使用弹性框和使用表显示值或浮点数来布局页面之间的三个区别:

  1. 能够对元素进行重新排序,而与HTML源代码的顺序无关,同时又使元素保持正常流动-您可以通过使用order属性指定一个整数值来做到这一点。
  2. 与传统的float布局相比,它需要更少的键入(您无需为清除目的而使用所有伪元素),并且更具语义,而对于布局使用float或表则显然不需要。
  3. 通过使用flex-growflex-shrink属性,伸缩项可以根据祖先元素的尺寸进行伸缩以填充水平和垂直空间。

问题(如您所指出的)是支持仍然很差。实际上,Firefox仍在实现旧版本的flexbox模块,因此您必须考虑语法和行为上的细微差异,具体取决于所使用的浏览器。不过,已经说了很多,这
布局的未来,尤其是对于弹出频率更高的复杂Web应用程序。值得学习的是,如果您可以进行不可避免的明智投资,那将是您暂时无法真正使用的代价。

我还建议您看一下这本热门杂志,以期对flexbox进行友好的介绍(这是最近写的)



 类似资料:
  • 问题内容: Angular应用使用属性而不是事件。 为什么是这样? 问题答案: ng-click包含一个角度表达式。Angular表达式是在Angular 范围的上下文中求值的,该范围绑定到具有ng- click属性的元素或该元素的祖先。 Angular表达式语言不包含流控制语句,也不能声明变量或定义函数。这些限制意味着模板只能访问由控制器或指令提供的变量和运行功能。

  • 以我的拙见,关于“什么是单子”这个著名问题的答案,尤其是投票最多的答案,试图解释什么是单子,而没有明确解释为什么单子是真正必要的。它们能被解释为一个问题的解决方案吗?

  • 为什么我们需要字典? 计算机最适合使用数字,而人类最适合使用姓名。我们创建了DNS以便记住主机名而不是IP地址。字典以相同的方式使用,因此我们可以记住AVP名称而不是类型编号。当FreeRADIUS解析请求或生成响应时,会查阅字典。 但是,字典与DNS不同,因为RADIUS客户端不知道FreeRADIUS使用的这些“友好”名称。永远不会在RADIUS客户端和RADIUS服务器之间交换AVP名称。

  • 问题内容: 我开始使用RxJS,但我不明白为什么在此示例中我们需要使用类似or 的函数;数组的数组在哪里? 如果有人可以直观地解释正在发生的事情,那将非常有帮助。 问题答案: 当您有一个Observable的结果是更多Observable时,可以使用flatMap。 如果您有一个由另一个可观察对象产生的可观察对象,则您不能直接过滤,缩小或映射它,因为您有一个可观察对象而不是数据。如果您生成一个可观

  • 问题内容: 使用JDBC连接池工具(如DBCP或c3p0)有什么好处? 如果只有 一个* 用户的 小型CRUD 应用程序,我们是否可以将 一个 连接会话创建为一个 单例 ? * PS :我正在构建一个带有小型数据库(5个表)的小型后端应用程序。 问题答案: 从Jon Skeet的答案到连接和语句池的好处是什么?: 创建到数据库服务器的网络连接是(相对)昂贵的。同样,要求服务器准备SQL语句(相对)

  • 问题内容: 我的问题就像标题说的那样:为什么我们需要9个补丁的图像?他们真的那么重要吗?其实,他们真正在做什么?我没有清楚地了解9色块图像的概念。 我知道9补丁图像是可伸缩的。因此,假设我有一些完全适合我的ldpi设备的图像按钮。使用Draw 9-patch工具(android SDK的一部分),我可以标记可缩放区域,并且该图像非常适合hdpi甚至xhdpi设备。边缘会很光滑。 但这真的是很好的实