flexible ボックスメモ - hogehoge @teramako

Firefox 18.0a(Nightly) で CSS Flexible Box Layout Module が実装されつつある。
その辺りは、FirefoxのFlexbox実装、進行中 - fragmentary 辺りを参照ってことで。

まぁともかく、about:config の値 layout.css.flexbox.enabled を true にすれば、少し試すことができる。

んで、Using CSS flexible boxes - CSS | MDN を読みつつ勉強。そのメモをば。

flex container

display: flex; な要素。その子要素がflex itemとなり、フレキシブルなレイアウトを実現する。

レイアウトには主軸(main axis)となる方向がある。上図では横方向(row)のレイアウトになっている。この方向を決めるのが、flex-directionプロパティ。

flex-direction: rowなら上図の様に子要素は横並びに配置
flex-direction: columnなら縦並びになる。上図とは違い、main axisは縦、cross axisは横になる。

そして、主軸(main axis)に対して直行する軸がcross axis。この主軸と直行軸に対して子要素(flex item)をどう配置するかを決めるのが、justify-contentとalign-items。

あっと忘れてた。画像のHTMLの基本は以下の様なものでCSSを少し変更しつつ進めて行く。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Flexbox</title>
  <style>
  .flex {
    display: flex;
    /*flex-direction: row;*/
    /*justify-content: space-around;*/
    /*align-items: baseline;*/
    height: 100px; background-color: silver; border: thin dashed black;;
  }
  .flex > div {
    padding-left: 5px; padding-right: 5px;
    background-color: #eebb55; border: thin solid black;
    border-radius: 10px;
  }
  .flex > div > p { text-align: center; } h1, p { margin: 0; }
  </style>
</head>
<body>
<h1>Flexbox - n</h1>
<pre><!-- ... --></pre>
<div class="flex">
  <div id="flexitem1"><p>flex item<br>1</p></div>
  <div id="flexitem2"><p>flex item<br>2</p></div>
  <div id="flexitem3"><p>flex item<br>3</p></div>
  <div id="flexitem4"><p>flex item<br>4</p></div>
</div>
</body>
</html>

flex-direction

指定できるのは以下のとおり

row: 主軸は横方向になる
column: 主軸は縦方向になる
row-reverse: 主軸は横方向になり、flex itemの並び順が逆になる
column-reverse: 主軸は縦方向になり、flex itemの並び順が逆になる

justify-content

justify-content - CSS | MDN

主軸、つまりflex-directionの軸に対してのレイアウト方法
各画像は、flex-direction: row時のもの

flex-start: デフォルト値。横方向なら左隅から、縦方向なら上隅からレイアウトが開始される(画像は Fig 2を参照)
flex-end: flex-startの逆。横方向なら右隅から、縦方向なら下隅から
center: 中央配置
space-between: 両端に沿うように配置し、間を等間隔になるように配置(?)
space-around: それぞれのflex itemを等間隔になるように配置
space-betweenと違い、両端も含めて均等配置となる(画像が分かり難いが、両端に少しスペースがあることに注目)