メモログ

今回は5.3. Flex Direction and Wrap: the flex-flow shorthandについて。flex-flowはflex-directionとflex-wrapをまとめて設定できる。

時間が開いてしまった。開きすぎてもはや自分でもよく覚えてないけど今回は4.5. Automatic Minimum Size of Flex Items、autoキーワードで自動的に決定される最小値について。

Specifying visibility:collapse on a flex item causes it to become a collapsed flex item, producing an effect similar to visibility:collapse on a table-row or table-column: the collapsed flex item is removed from rendering entirely, but leaves behind a “strut” that keeps the flex line’s cross-size stable. Thus, if a flex container has only one flex line, dynamically collapsing or uncollapsing items may change the flex container’s main size, but is guaranteed to have no effect on its cross size and won’t cause the rest of the page’s layout to “wobble”. Flex line wrapping is re-done after collapsing, however, so the cross-size of a flex container with multiple lines might or might not change.

Though collapsed flex items aren’t rendered, they do appear in the formatting structure. Therefore, unlike on display:none items [CSS21], effects that depend on a box appearing in the formatting structure (like incrementing counters or running animations and transitions) still operate on collapsed items.

flex itemにvisibility:collapseを指定するとflex itemが折り畳まれるようになり、table-rowやtable-columnにおけるvisibility:collapseと同様の効果を得ることができる。折り畳まれたflex itemはレンダリングから完全に削除されるが、flex lineのcross-sizeを安定させるための「支柱」を残す。そのため、もしflex containerにflex lineが一つしかない場合、itemsを折り畳んだり開いたりすることはflex containerのmain sizeを変更するかもしれないが、cross sizeには効果を及ぼさないことが保証され、ページの残りのレイアウトが「揺らぐ」ことはない。しかしながら、Flex lineの折り返しは折り畳まれた後に再度折り返しが実行されるので、複数行にまたがるflex containerのcross-sizeは変わるかもしれないし、変わらないかもしれない。

折り畳まれたflex itemsはレンダリングされないけれども、それらはformatting structureには出現する。したがって、display:noneとは異なり、（incrementing counterやアニメーションやtransitionなどの実行のように）formatting structureに現れるboxに依存する効果は、折り畳まれたitemに対しても実行が続く。

EXAMPLE 4 In the following example, a sidebar is sized to fit its content. visibility: collapse is used to dynamically hide parts of a navigation sidebar without affecting its width, even though the widest item (“Architecture”) is in a collapsed section.

次の例では、サイドバーはコンテンツに合わせてサイズが調整される。visibility: collapseはサイドバーの一部分を動的に見えなくする。たとえ最も幅が広いアイテム（ここでは「Architecture」の項目）が折り畳まれたセクションにある場合でも、横幅に影響が出ないようになっている。

@media (min-width: 60em) {
  /* 十分な空間があるときだけ2カラムのレイアウトになる
  （文字サイズはデフォルトのサイズから相対的に決まる） */
  div { display: flex; }
  #main {
    flex: 1;         /* メイン部分は残った空間全てを使う */
    order: 1;        /* （右の）ナビゲーションの後に配置する */
    min-width: 12em; /* メインコンテンツのサイズを最適化する */
  }
}
/* メニューのアイテムはvisibility:collapseが動くように
flex layoutを利用する。 */
nav > ul > li {
  display: flex;
  flex-flow: column;
}
/* サブメニューはターゲットでないときに折り畳まれる */
nav > ul > li:not(:target):not(:hover) > ul {
  visibility: collapse;
}

<div>
  <article id="main">
    Interesting Stuff to Read
  </article>
  <nav>
    <ul>
      <li id="nav-about"><a href="#nav-about">About</a>
        …
      <li id="nav-projects"><a href="#nav-projects">Projects</a>
        <ul>
          <li><a href="…">Art</a>
          <li><a href="…">Architecture</a>
          <li><a href="…">Music</a>
        </ul>
      <li id="nav-interact"><a href="#nav-interact">Interact</a>
        …
    </ul>
  </nav>
</div>
<footer>
…

flexショートハンドは、以下のような定義になっている。

none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]`

flex: 1の場合、flex: 1 1 0 と記述されるのと同じになる。未設定の初期値は flex: 0 1 autoとなるのだが、7.1.1. Basic Values of flexに以下のような説明がついている。

flex: initial
Equivalent to flex: 0 1 auto. (This is the initial value.) Sizes the item based on the width/height properties. (If the item’s main size property computes to auto, this will size the flex item based on its contents.) Makes the flex item inflexible when there is positive free space, but allows it to shrink to its minimum size when there is insufficient space. The alignment abilities or auto margins can be used to align flex items along the main axis.

flex itemはwidth/heightのプロパティに基づいてサイズ調整される（もしitemのmain sizeプロパティがautoと計算された場合、そのコンテンツを基にサイズが調整される）。空いてるスペースがある場合、flex itemは不変（inflexible）であるけど、十分なスペースがない場合は最小サイズまで縮小することができる。alignmentやauto marginsはmain axisに沿ってflex itemsを揃えるために使われる。

つまり、上の例のCSSの場合、navの部分の横幅は（十分な空間があれば）コンテンツの長さと同じになる。その時のコンテンツの長さはvisibility: collapseによる影響を受けない。#mainの部分は空いてる空間に応じて広がる。

orderの初期値は0なので（5.4. Display Order: the order property）、order: 1を設定することで、<nav>の方が先に配置される。

To compute the size of the strut, flex layout is first performed with all items uncollapsed, and then re-run with each collapsed item replaced by a strut that maintains the original cross-size of the item’s original line. See the Flex Layout Algorithm for the normative definition of how visibility:collapse interacts with flex layout.

「支柱(strut)」のサイズを計算するために、flexレイアウトは最初にすべてのitemを折り畳まれていない状態（uncollapsed）で実行され、その後に、折り畳まれるitemをitemのオリジナルの行のオリジナルのcross-sizeを維持する支柱によって置き換えて再実行する。

Note: Using visibility:collapse on any flex items will cause the flex layout algorithm to repeat partway through, re-running the most expensive steps. It’s recommended that authors continue to use display:none to hide items if the items will not be dynamically collapsed and uncollapsed, as that is more efficient for the layout engine. (Since only part of the steps need to be repeated when visibility is changed, however, ‘visibility: collapse’ is still recommended for dynamic cases.)

flex itemにvisibility:collapseを使うことは、flexレイアウトのアルゴリズムを途中で繰り返すことになり、最も高コストなステップを再実行することになる。もしitemを動的に折り畳んだり展開したりしないなら、アイテムを非表示にするのには display:none を使うことを推奨する。レイアウトエンジンにとってその方が効率的だから。（しかしながら、visibilityが変わったらステップの一部は繰り返す必要があるので、動的に変更するケースにおいては visibility: collapse は推奨される）。

今回は4.2. Flex Item Margins and Paddingsと4.3. Flex Item Z-Orderingについて

4.2. Flex Item Margins and Paddings

The margins of adjacent flex items do not collapse.

Percentage margins and paddings on flex items, like those on block boxes, are resolved against the inline size of their containing block, e.g. left/right/top/bottom percentages all resolve against their containing block’s width in horizontal writing modes.

Auto margins expand to absorb extra space in the corresponding dimension. They can be used for alignment, or to push adjacent flex items apart. See Aligning with auto margins.

隣接するflex itemsのマージンは相殺されない。

flex itemsのmarginとpaddingのパーセントは、ブロックのboxと同じように、containing blockのインラインのサイズに対して解決される。たとえば、left/right/top/bottomのパーセントはすべてhorizontal writing modeにおけるcontaining blockのwidthに対して解決される。

auto marginsは、対応する次元の中で余分なスペースを吸収するように広がる。それらはalignmentのために利用されるか、隣接するflex itemsを話すために利用される。

4.3. Flex Item Z-Ordering

Flex items paint exactly the same as inline blocks [CSS21], except that order-modified document order is used in place of raw document order, and z-index values other than auto create a stacking context even if position is static (behaving exactly as if position were relative).

Note: Descendants that are positioned outside a flex item still participate in any stacking context established by the flex item.

Flex itemはインラインブロックと同じように描画されるが、orderが修正されているドキュメントの並び順は生のドキュメントの並び順の代わりに使われる。また、たとえ配置がstaticであっても、auto以外のz-indexの値は自動的にstacking contextを作成する（まるで配置がrelativeであるかのように振舞う）。

flex itemの外側に配置された子孫は、そのflex itemによって構築されたすべてのstacking contextに参加する。