控制伸縮流的方向的 'flex-flow' 屬性的值的設計問題

（下面敘述裡用規範裡定義的字彙[1]）

在 CSS 可伸縮盒布局模組中，控制伸縮項目排列方向[2]的屬性是：

  flex-direction: row | column | row-reverse | column-reverse

和

  flex-wrap: nowrap | wrap | wrap-reverse

然後 'flex-flow' 是兩個的縮寫。若 A、B、C、D、E、F 是伸縮項目，'flex-
flow: row;' 是

  A B C D E F

'flex-flow: column;' 是

  A
  B
  C
  D
  E
  F

'flex-flow: wrap;' （'flex-direction' 的初始值是 'row'）是

  A B C
  C D E

'flex-flow: column wrap;' 是

  A D
  B E
  C F



這些都沒什麼問題。然而一直以來，我都覺得 'flex-flow: wrap-reverse' 是

  A B C
  F E D

，也就是換行之後主軸兩邊交換。不過其實是

  D E F
  A B C

。這個雖然在 'flex-direction: row' 感覺很奇怪，不過 'wrap-reverse' 的主
要用途是 'flex-flow: column wrap-reverse'：

    D A
    E B
    F C

想起來從右到左的 'column' 的確是有用的。



所以，目前的設計有問題嗎？

A. 沒問題。這已經是最好的設計了，學會了之後就不會有 'flex-wrap:
wrap-revese' 是「換行之後主軸兩邊交換」的錯覺。

B. 有問題。'wrap-reverse' 應該在 'flex-direction: row/row-reverse' 的時
候「換行之後主軸兩邊交換」，在 'flex-direction: column/column-reverse'
的時候照舊。

這其實應該還算合理，基本上從下往上排的布局感覺相當少，所以上面
'flex-flow: row wrap-reverse' 的行為才讓人很意外。我個人覺得
'column-reverse' 這種也不是很有用。（就像現在也沒有 'writing-mode:
horizontal-bt'）

比較奇怪的地方是如果有 'justify-content: flex-start' 之類的話，會一行往
左靠，一行往右靠，不過應該還好。

C. 有問題。'flex-flow' 的語法應該弄成

  [ row | column ] || [ wrap | nowrap ] || main-reverse || cross-reverse

也就是 'flex-wrap' 根本不應該能夠控制側軸的方向，而只有 'wrap'、'nowrap'
兩種，而 'flex-direction' 變成

  [ row | column ] || main-reverse || cross-reverse

。這樣的話，原來的 'flex-flow: column wrap-reverse' 就要寫成 'flex-flow:
column wrap cross-reverse'。而原來我認為很容易造成誤會的 'flex-flow:
wrap-reverse'，因為要寫成 'flex-flow: wrap cross-reverse' 所以比較不會有
「換行之後換邊」的聯想。

'main-reverse'/'cross-reverse' 的命名還可以想想，比如說
'reverse'/'switch'？不過這類的字的意思都很像、、、

話說當初 'flex-flow' 拆成 'flex-direction'/'flex-wrap' 的時候，Tab 也有
提過要留著 'flex-wrap: nowrap-reverse'，也就是等同於這個提案的
'flex-flow: nowrap cross-reverse'，不過一般是認為這個組合沒什麼用[3]所以
目前才沒有這個值。就這個角度來想的話，與其有這種最多組合的提議，B 這種好
像也不錯，還是說從底邊往上排的這種真的有需求？

想法？其他提案？


[1] （繁體版）http://www.w3.org/html/ig/zh/wiki/css3-flexbox/zh-
hant#box-model
（簡體版）http://www.w3.org/html/ig/zh/wiki/css3-flexbox/zh-hans#box-model
（工作中版本）http://www.w3.org/html/ig/zh/wiki/css3-flexbox/#box-model

（對於各個翻譯有不同意見的還請不嗇指教）

[2]
http://www.w3.org/html/ig/zh/wiki/css3-flexbox/#ordering-and-orientation
（其他版本的 URL 類推）
[3] http://lists.w3.org/Archives/Public/www-style/2011Dec/0240


以上

Kenny

Received on Tuesday, 3 July 2012 01:47:29 UTC