你的位置:首页 > 软件开发 > 网页设计 > 译文:Flexbox 完全指南 (A Complete Guide to Flexbox)

译文:Flexbox 完全指南 (A Complete Guide to Flexbox)

发布时间:2017-09-01 18:00:16
原文:A Complete Guide to Flexbox作者:Chris Coyier原文最后更新:July 20, 2017译者:leotso 背景Flexbox 布局 (Flexible Box) 模块 (目前是 W3C 的一个最后征集工作草案(Last Call W ...

译文:Flexbox 完全指南 (A Complete Guide to Flexbox)

  • 原文:A Complete Guide to Flexbox
  • 作者:Chris Coyier
  • 原文最后更新:July 20, 2017
  • 译者:leotso

 

背景

Flexbox 布局 (Flexible Box) 模块 (目前是 W3C 的一个最后征集工作草案(Last Call Working Draft))旨在提供一种更有效的方式,在容器的项之间处理布局、对齐和空间分配,即使它们的大小未知并且/或是动态变化的(因此叫做“flex”)。

Flex 布局背后的主要思想是让容器能够改变其项的宽度/高度(和顺序),以最好地填充可用空间(主要是为了适应各种显示设备和屏幕大小)。一个 flex 容器扩大其项来填充可用的空闲空间,或者缩小它们以防止溢出。

最重要的是,flexbox 布局与常规布局(基于垂直的块(block)、基于水平的内联(inline))截然相反,flexbox 布局是方向无关的。虽然常规布局工作很适合页面,但它们缺乏灵活性(没有双关语)来支持大型或复杂的应用程序(特别是当涉及到方向变化、大小调整、拉伸、收缩等)时。/* Medium screens */@media all and (min-width: 600px) { /* We tell both sidebars to share a row */ .aside { flex: 1 auto; }}
/* Large screens */@media all and (min-width: 800px) { /* We invert order of first sidebar and main * And tell the main element to take twice as much width as the other two sidebars */ .main { flex: 2 0px; } .aside-1 { order: 1; } .main { order: 2; } .aside-2 { order: 3; } .footer { order: 4; }}

https://codepen.io/team/css-tricks/pen/jqzNZq

 

Flexbox 前缀

Flexbox 需要一些供应商(vendor)的前缀来支持尽可能多的浏览器。它不仅包含带有供应商前缀的前置修饰属性,还包括实际上完全不同的属性和值名。这是因为 Flexbox 规范已经随着时间的推移而改变,创建了一个“旧的”、“过渡的”和“新的”版本。也许处理这一问题的最好方法是编写新的(和最终的)语法,并通过 Autoprefixer 运行您的CSS,它能够很好地处理回退问题。或者,这里有一个 Sass 的 @mixin 来帮助处理一些前缀,这也让你知道需要做些什么:
@mixin flexbox() { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;}@mixin flex($values) { -webkit-box-flex: $values; -moz-box-flex: $values; -webkit-flex: $values; -ms-flex: $values; flex: $values;}@mixin order($val) { -webkit-box-ordinal-group: $val; -moz-box-ordinal-group: $val; -ms-flex-order: $val; -webkit-order: $val; order: $val;}.wrapper { @include flexbox();}.item { @include flex(1 200px); @include order(2);}

 

相关文章

  • A Complete Guide to Grid
  • Almanac entries on Grid properties, like grid-row / grid-column

其他资源

  • Flexbox in the CSS specifications
  • Flexbox at MDN
  • Flexbox at Opera
  • Diving into Flexbox by Bocoup
  • Mixing syntaxes for best browser support on CSS-Tricks
  • Flexbox by Raphael Goetter (FR)
  • Flexplorer by Bennett Feely

Bugs

Flexbox 当然不是没有它的 bug/缺陷/issue。我目前所看到的最好的关于它们的收集是 Philip Walton 和 Greg Whitworth 的 Flexbugs。这是一个用来追踪所有 bug/缺陷/issue 的开放源代码的地方,所以我认为最好只是将它链接在此。 

浏览器支持

根据 flexbox 的“版本”拆分:
  • (new) 表示规范中最新的语法(例如 display: flex;)
  • (tweener) 这是2011年以来的一种怪异的非官方语法(例如 display: flexbox;)
  • (old) 表示从2009开始的旧的语法(例如 display: box;)
ChromeSafariFirefoxOperaIEAndroidiOS
20- (old)3.1+ (old)2-21 (old)12.1+ (new)10 (tweener)2.1+ (old)3.2+ (old)
21+ (new)6.1+ (new)22+ (new)11+ (new)4.4+ (new)7.1+ (new)
 有关如何混合语法以获得最佳浏览器支持的更多信息,请参考 this article (CSS-Tricks) 或者 this article (DevOpera)。黑莓浏览器 10+ 支持新语法。 

原标题:译文:Flexbox 完全指南 (A Complete Guide to Flexbox)

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录