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

space-around的定义恐怕是为了算法上偷懒才这么设计的吧。
在一个宽度1000px的行中，若存在3个box，宽度分别为200px，200px，300px，那 
么空余的宽度为300px。
在宽度这个方向上，每个box有两条边，那么每条边与相邻元素的距离应为 
300px/6=50px。
为了和margin做出区别，box的宽度在计算的时候包括了间距，于是box与父元素边 
缘的间距为50px，而两个box之间的距离变成了双倍 的100px。

以上是我猜的。

不过我个人还是觉得box到父元素边缘等于box间距离比较好看些。

于 2012/7/18 11:11, Kang-Hao (Kenny) Lu 写道:
> 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
>

-- 
Regards

Hawkeyes Wind

Received on Wednesday, 18 July 2012 05:44:07 UTC