メモログ

💡 Personal notes about anything I'm interested in

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で定義されているものもある。