メモログ

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

||はCSS property conventionsで書いたように、||で別れた値のどれか 1 つ以上が記述される必要がある。順不同。

The flex-flow property is a shorthand for setting the flex-direction and flex-wrap properties, which together define the flex container’s main and cross axes.

flex-flow プロパティはflex-directionとflex-wrapプロパティを設定するためのショートハンドで、flex container の main と cross axes の両方を一緒に設定することができる。

flex-direction はFlex Flow Direction: the flex-direction property にて、flex-wrap についてはFlex Line Wrapping: the flex-wrap propertyにて書いた。

EXAMPLE 5 Some examples of valid flows in an English (left-to-right, horizontal writing mode) document:

英語ドキュメント（左から右、horizontal writing mode）での valid flows の例。

div {
  flex-flow: row;
}
/* 初期値。main axisはインラインで、折り返さない。
  （itemsは収まるように収縮するか、オーバーフローする。） */

div {
  flex-flow: column wrap;
}
/* main axisはblock-direction（上から下）
   で行はインライン方向（右方向）へ折り返しする。*/

div {
  flex-flow: row-reverse wrap-reverse;
}
/* main axisはインライン方向と反対になる（右から左）。
   新しい行は上側に折り返される。*/

Note that the flex-flow directions are writing mode sensitive. In vertical Japanese, for example, a row flex container lays out its contents from top to bottom, as seen in this example:

flex-flow は writing mode sensitive なのに注意。例えば縦書きの日本語では行の flex container はコンテンツを上から下に配置する。