メモログ

今回は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の例。

1
2
3

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

1
2
3

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

1
2
3

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はコンテンツを上から下に配置する。