CSSフレックスボックス
Antenna House Formatter V7.4 は、CSS Flexible Box Layout Module Level 1 に対応しています。
拡張プロパティ
CSS (-ah-)align-content V7.4
フレックスコンテナの各行の位置揃えを指定します。 [CSS3-FlexBox] Packing Flex Lines: the ‘align-content’ property, [CSS3-Align] The ‘justify-content’ and ‘align-content’ Properties
Value: | flex-start | flex-end | center | space-between | space-around | stretch (Flexible Box) normal | |
Initial: | stretch (Flexible Box) normal (Grid) |
Applies to: | multi-line flex containers, grid containers |
Inherited: | no |
Percentages: | N/A |
<content-distribution> | = | space-between | space-around | space-evenly | stretch |
<content-position> | = | center | start | end | flex-start | flex-end |
CSS (-ah-)align-items V7.4
フレックスコンテナ内のアイテムの交差軸方向の配置を一括で指定します。 [CSS3-FlexibleBox] Cross-axis Alignment: the ‘align-items’, [CSS3-Align] Block-Axis (or Cross-Axis) Alignment: the ‘align-items’ property
Value: | flex-start | flex-end | center | baseline | stretch (Flexible Box) normal | stretch | |
Initial: | stretch (Flexible Box) normal (Grid) |
Applies to: | flex containers, grid containers |
Inherited: | no |
Percentages: | N/A |
CSS (-ah-)align-self V7.4
フレックスアイテムの交差軸方向の配置を一括で指定します。 [CSS3-FlexibleBox] Cross-axis Alignment: the ‘align-self’, [CSS3-Align] Block-Axis (or Cross-Axis) Alignment: the ‘align-self’ property
Value: | auto | flex-start | flex-end | center | baseline | stretch (Flexible Box) auto | normal | stretch | |
Initial: | auto |
Applies to: | flex items, grid items |
Inherited: | no |
Percentages: | N/A |
CSS (-ah-)flex V7.4
フレックスアイテムの伸縮と幅の初期値に関連するプロパティをまとめて指定するショートハンドプロパティです。 [CSS3-FlexibleBox] The 'flex' Shorthand
Value: | none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] |
Initial: | 0 1 auto |
Applies to: | flex items |
Inherited: | no |
Percentages: | see individual properties |
このプロパティは、flex-grow、flex-shrink、flex-basis のショートハンドです。
CSS (-ah-)flex-basis V7.4
フレックスアイテムの主軸方向の幅の初期値を設定します。 [CSS3-FlexibleBox] The 'flex-basis' property
Value: | content | <width> |
Initial: | auto |
Applies to: | flex items |
Inherited: | no |
Percentages: | relative to the flex container’s inner main size |
CSS (-ah-)flex-direction V7.4
フレックスコンテナの主軸方向を設定します。 [CSS3-FlexibleBox] Flex Flow Direction: the 'flex-direction' property
Value: | row | row-reverse | column | column-reverse |
Initial: | row |
Applies to: | flex containers |
Inherited: | no |
Percentages: | N/A |
CSS (-ah-)flex-flow V7.4
フレックスコンテナの方向に関連するプロパティをまとめて指定するショートハンドプロパティです。 [CSS3-FlexibleBox] Flex Direction and Wrap: the flex-flow shorthand
Value: | <'flex-direction'> || <'flex-wrap'> |
Initial: | see individual properties |
Applies to: | see individual properties |
Inherited: | see individual properties |
Percentages: | see individual properties |
このプロパティは、flex-direction、 flex-wrap のショートハンドです。
CSS (-ah-)flex-grow V7.4
フレックスアイテムの伸長計数を設定します。 [CSS3-FlexibleBox] The 'flex-grow' property
Value: | <number> |
Initial: | 0 |
Applies to: | flex items |
Inherited: | no |
Percentages: | N/A |
CSS (-ah-)flex-shrink V7.4
フレックスアイテムの縮小計数を設定します。 [CSS3-FlexibleBox] The 'flex-shrink' property
Value: | <number> |
Initial: | 1 |
Applies to: | flex items |
Inherited: | no |
Percentages: | N/A |
CSS (-ah-)flex-wrap V7.4
フレックスコンテナを単行にするか複行にするか、また行のスタック方向を設定します。 [CSS3-FlexibleBox] Flex Line Wrapping: the 'flex-wrap' property
Value: | nowrap | wrap | wrap-reverse |
Initial: | nowrap |
Applies to: | flex containers |
Inherited: | no |
Percentages: | N/A |
CSS (-ah-)justify-content V7.4
主軸方向のアイテムの位置揃えを設定します。 [CSS3-FlexibleBox] Axis Alignment: the ‘justify-content’ property, [CSS3-Align] The ‘justify-content’ and ‘align-content’ Properties
Value: | flex-start | flex-end | center | space-between | space-around (Flexible Box)
normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ] (Grid) |
Initial: | flex-start (Flexible Box) normal (Grid) |
Applies to: | flex containers, grid containers |
Inherited: | no |
Percentages: | N/A |
CSS (-ah-)order V7.4
アイテムの並び順の優先度を設定します。 [CSS3-FlexibleBox] Display Order: the 'order' property
Value: | <integer> |
Initial: | 0 |
Applies to: | flex items, grid items |
Inherited: | no |
Percentages: | N/A |
制限事項
Antenna House Formatter V7.4 のフレックスボックスには、以下のような制限事項があります。
改ページ等でフレックスラインが断片化された時、flex-directionの方向によっては後続のフレックスラインでは以下のプロパティの値が上書きされます。
flex-directionの方向 上書きされるプロパティ 上書きする値 column justify-content flex-start