Hatena::Groupmoz-addon

Ci.nsIZIGOROu

2007-11-09xulむつかすぃー

flex属性を使ったレイアウト

| 15:37 |  flex属性を使ったレイアウト - Ci.nsIZIGOROu を含むブックマーク はてなブックマーク -  flex属性を使ったレイアウト - Ci.nsIZIGOROu

そもそも

なんかXULだとCSSでの値の指定、例えばemとか%とかautoが効かなかったり、*1独自のCSSプロパティがあったりとかで何かと難しい。

@zigorou XULは最低限使うだけにしてHTMLで組んじゃうのが賢い気がしてきました。その方が自由度高いし。パフォーマンスよくないだろうけどGUI部分でパフォーマンスが必要なことはあまりないし。Firebug wayってことで自信も出てきました。 Twitter / KUMAGAI⌘ku0522: @zigorou XULは最低限使うだけにしてHTML...

分かる分かる!w

でもまだ全然やってないからまだXULから逃げないぞ!

@zigorou XUL層にHTMLでOverlayかけると不具合起きるからおすすめできない。 Twitter / norah: @zigorou XUL層にHTMLでOverlayか...

ギャフン><

@zigorou XULでの大きさの指定はFlexで制御する方が確実かと。 *

むほ、flexってなんだろ。。。

miniturboの発言
あ、flex便利ですよー

と言う訳で調べてみたよ。

まずはサンプル

サンプル
http://sample.art-code.org/xul/flex.xul
実行結果
f:id:ZIGOROu:20071109153348p:image

flex属性とは

付けるとその数値を割合として画面一杯*2割り当てる属性で、整数値を指定するみたいです。

サンプルのソースと結果見れば一目瞭然ですな。

Example3を例にとれば下記のような感じ。

<hbox>
  <button label="Foo" flex="1" />
  <button label="Bar" flex="2" />
  <button label="Baz" flex="3" />
</hbox>

1:2:3で幅いっぱいに割り当ててくれる様が良く分かる。

XULはハマる人が多そうだから、激しく既出感が拭えませんが敢えて書いてみました。

誰かの参考になれば幸いでござる。

参考リンク

*1:この部分はまったく効かない訳じゃないので、訂正。

*2:正確には親要素のwidth or heightに対して

takenspctakenspc2007/11/09 18:39XUL でも CSS の width や height プロパティに em は使えますよ。

ZIGOROuZIGOROu2007/11/11 23:12width, heightは試してないかもです><
padding, margin辺りの挙動が怪しくないですかね?