メモログ

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

key	value
Name	flex-flow
Value	<‘flex-direction’> || <‘flex-wrap’>
Initial	see individual properties
Applies to	see individual properties
Inherited	see individual properties
Percentages	see individual properties
Computed value	see individual properties
Animation type	see individual properties
Canonical order	per grammar

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