伸縮容器 'space-around' 裡兩邊與中間的空白差異

css3-flexbox 裡 'justify-content' 等等屬性的 'space-around' 值的定義[1]
如下：

  # space-around
  #
  # 伸缩盒项目会平均地分布在行里，两端保留一半的空间。如果最左边的剩余空
  # 间是负数，或该行只有一个伸缩盒项目，则该值等效于'center'。在其它情况
  # 下，伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元
  # 素前的空间以及最后一个元素后的空间为其他空白空间的一半。

有沒有對網頁設計比較有感覺的朋友能判斷一下最後一句話的這個行為比較常用，
還是所有空間都一樣比較常用？也就是規範是不是應該改成

  | 同时第一个元素前的空间以及最后一个元素后的空间为與其他空白空间相同。

？

原來這個行為還是可以透過

  .flex-item { margin: 0 auto; }

得到，所以我覺得這個 'space-around' 應該以常用的為主，當然這個新行為也可以用

  .flex-item { margin-left: auto; }
  .flex-item:last-child { margin-right: auto; }

得到，不過就是比較冗長、奇怪一點。

[1] http://www.w3.org/html/ig/zh/wiki/css3-flexbox#justify-content


以上

Kenny

Received on Wednesday, 18 July 2012 03:11:58 UTC