响应式布局

未来的布局方式，可能不同于现有的 Flexbox 与 CSS Grid 这样的从上到下的流式布局，随着 Resize Observer API 这类新的 DOM API，我们未来可能会出现响应式布局或者其他关系型布局。比如写布局时的逻辑可能是“模式匹配”的，当我独占一行时，我怎么布局；当我左侧有某个元素时，我怎么布局。 比如用 react 写一个瀑布流时，可以这样做：我是一个组件，当我 didMount 时，我获取我顶上的元素的位置 position，然后加上一个间距 padingTop，就得到了我自己的位置。

Auto Resize: 自动缩放

CSS Responsive Grid System

Flexbox: 动态分配空间

Proportional Scale: 按比例缩放

Auto Layout 自动布局

Flexbox:flex-wrap

Bugs

在 iOS 中有时候会发现如果没有设置 flex 元素的尺寸，只是设置了最大值或者最小值会导致计算是否需要换行出现错误，可以参考row-wrap-in-flex-box-not-wrapping-in-safari这个问题，即如果我们的样式是：

div.flex {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-direction: row;
  flex-direction: row;
}

div.flex .item {
  min-width: 15em;
  -webkit-flex: 1;
  flex: 1;
}

这样的 item 是不会自动换行的，而需要显式的指明 item 的尺寸：

div.flex {
   display: -webkit-flex;

   display: flex;
  -webkit-flex-wrap: wrap;

   flex-wrap: wrap;
  -webkit-flex-direction: row;

   flex-direction: row;
}

div.flex .item {
   min-width: 15em;
  -webkit-flex: 1 1 15em; /* this */

   flex: 1;
}

该 Bug 已经提交到了在Safari (WebKit) doesn’t wrap element within flex when width comes below min-width，可以使用 iOS 打开CodePen来查看问题复现。

不过笔者在实际使用 flex-wrap 属性的时候发现在 iPhone 5/5s(iOS 8/9)上出现了一个很奇怪的错误，详情可见笔者在 StackOverflow 上提出的flex-wrap-doesnt-work-in-iphone5-ios-8问题。