'space-between' 在伸縮盒空間小於內容的情況下的行為

另外一個跟 'space-*' 有關的問題：

  當伸縮盒的空間塞不下內容的時候（容易發生在單行伸縮容器上），'space-*'
  的對齊行為應該是怎麼樣子？

目前規範是這樣寫[1]的：

  # space-between
  #
  # 伸缩盒项目会平均地分布在行里。如果最左边的剩余空间是负数，或该行只有
  # 一个伸缩盒项目，则该值等效于'flex-start'。在其它情况下，第一个元素的
  # 边距边界与行的主起始位置的边界对齐，同时最后一个元素的边距边界与行的
  # 主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的
  # 空白空间相等。
（這個「最左邊」是翻譯贅字。s/最左邊的//）

我很懷疑在這種情況下，伸縮項目是不是應該互相擠壓（也就是項目之間的間隔是
「負的」），讓兩邊仍然對齊。我做了一個這個行為的演示[2]。大致的優缺點分
析一下：

== 互相擠壓的優點 ==

* 伸縮盒一個常用的使用情節是圖示的排列，有可能圖示在設計的時候左右留了一
些白（如演示上面那種情形），在這種情況下是有一點擠壓的空間的。（反論：未
來可以用 Media Fragement URI 只取沒剩空白的圖片範圍。）

* 不擠壓就一定會溢出，溢出是很糟糕的狀況，因為會產生捲動條。（反論：可以
用 'overflow: hidden'。反論的反論： 'overflow: hidden' 可能會對布局造成
副作用）

* 互相擠壓的行為不太可能用其他屬性或是 CSS 方法模擬，加入這個行為讓開發
者的可操作性更高一點。（參考下面兩個例子）

== 互相擠壓的缺點 ==

* 圖片重疊的圖示列基本上是不能用的。（反論：假如狀況真的這麼嚴重的話，這
裡還有用 "@media (max-width: xxx) { div { justify-content: flex-start; }
}" 轉圜的餘地。）

* 不能用 'margin-left/right' 來達到項目之間最小間隔。（反論：仍可以用媒
體查詢達到這個目的。）


綜合分析的話，我是覺得互相擠壓的優點大於缺點，所以規範應該改成：

  | space-between
  |
  | 伸缩盒项目会平均地分布在行里。如果该行只有一个伸缩盒项目，则该值等效
  | 于 'flex-start'。在其它情况下，第一个元素的边距边界与行的主起始位置
  | 的边界对齐，同时最后一个元素的边距边界与行的主结束位置的边距对齐，而
  | 剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。請注意這個
  | 空間可能是負的，也就是伸縮項目之間可能會互相擠壓。

（伸縮行裡只有一個項目的話，擠壓還是不可能的，這個特例還跟一個我最近發現
的浮動計算的有趣例子有關，下次分享。）


大家怎麼想？


[1] http://www.w3.org/html/ig/zh/wiki/css3-flexbox#justify-content
[2]
http://lists.w3.org/Archives/Public/www-archive/2012Jul/att-0027/space-between


以上

Kenny

Received on Wednesday, 25 July 2012 20:15:35 UTC