メモログ

💡 Personal notes about anything I'm interested in

Flex Direction and Wrap: the flex-flow shorthand

今回は5.3. Flex Direction and Wrap: the flex-flow shorthandについて。flex-flowはflex-directionflex-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-directionflex-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はコンテンツを上から下に配置する。