メモログ

Flex Layout Box Model and Terminology

CSS Flexible Box Layout Module Introductionから引き続き、2. Flex Layout Box Model and Terminologyについて確認する。

A flex container is the box generated by an element with a computed display of flex or inline-flex. In-flow children of a flex container are called flex items and are laid out using the flex layout model.

flex container は display がflexinline-flexになっている要素によって生成される。flex container の in-flow な(float や position:absolute などで out-of-flow になっていない)子どもは、flex items と呼ばれ、flex レイアウトモデルによって配置される。

Unlike block and inline layout, whose layout calculations are biased to the block and inline flow directions, flex layout is biased to the flex directions. To make it easier to talk about flex layout, this section defines a set of flex flow–relative terms. The flex-flow value and the writing mode determine how these terms map to physical directions (top/right/bottom/left), axes (vertical/horizontal), and sizes (width/height).

レイアウトの計算がブロックとインラインの flow direction(右から左、上から下というコンテンツの流れの方向)に偏るブロックとインラインのレイアウトとは異なり、flex レイアウトは flex direction によって偏る。flex レイアウトの話を簡単にするために、このセクションでは flex flow-relative について定義をする。flex-flow の値とライティングモードは、これらの用語がどのように物理的な方向(上下左右)、軸(垂直・水平)、サイズ(横幅・縦幅)にマップされるかを決定する。

(**図** いろいろな方向やサイズの用語flex containerの行に適用される様子)

main axis > main dimension The main axis of a flex container is the primary axis along which flex items are laid out. It extends in the main dimension.

flex container のmain axisは主軸であり、flex アイテムはそれに沿って配置される。それはmain dimensionの中で広がる。

main-start > main-end The flex items are placed within the container starting on the main-start side and going toward the main-end side.

flex アイテムは container 内に配置される。main-start側から始まって、main-endに向かって進む。

main size > main size property The width or height of a flex container or flex item, whichever is in the main dimension, is that box’s main size. Its main size property is thus either its width or height property, whichever is in the main dimension. Similarly, its min and max main size properties are its min-width/max-width or min-height/max-height properties, whichever is in the main dimension, and determine its min/max main size.

flex container または flex アイテムの横幅または高さ、main dimension ではそのいずれかが、box のmain sizeである。つまり main size プロパティは横幅か高さのプロパティであり、どちらかが main dimension になる。同様に、min と max サイズのプロパティは、min-width/max-width か、min-height/max-height のプロパティであり、どちらかが main dimension であり、main size の min/max サイズを決定する。

cross axis > cross dimension The axis perpendicular to the main axis is called the cross axis. It extends in the cross dimension.

main axis に対して直交する軸が、cross axis(交差軸)と呼ぶ。cross dimensionの中で広がる。

cross-start > cross-end Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side.

Flex lines(行)はアイテムで満たされる。container の中に flex container のcross-start側から始まり、cross-end側に向かって配置される。

cross size > cross size property The width or height of a flex container or flex item, whichever is in the cross dimension, is that box’s cross size. Its cross size property is thus either its width or height property, whichever is in the cross dimension. Similarly, its min and max cross size properties are its min-width/max-width or min-height/max-height properties, whichever is in the cross dimension, and determine its min/max cross size.

flex container または flex アイテムの横幅と高さは、そのどちらかがcross dimensionの中にあり、その box のcross sizeとなる。cross size のプロパティは、つまり横幅か高さのプロパティであり、いずれかが cross dimension の中にある。同様に min と max cross size プロパティは min-width/max-width か、min-height/max-height プロパティであり、そのどちらかが cross dimension の中にあり、min/max cross size を決定する。

Additional sizing terminology used in this specification is defined in CSS Intrinsic and Extrinsic Sizing. [CSS-SIZING-3]

この仕様で使われているサイズに関する用語にはCSS Intrinsic and Extrinsic Sizingで定義されているものもある。

私について

Yutaka Yamaguchi
東京在住。TypeScript, Node.js, Reactなどフロンエンドが主力。Perlも書く。SwiftやRubyも過去には使ってた。過去のTOEIC 860くらい。