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 | <baseline-position> | <content-distribution> | <overflow-position>? <content-position> (Grid)
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 | <baseline-position> | [ <overflow-position>? <self-position> ] (Grid)
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 | <baseline-position> | <overflow-position>? <self-position> (Grid)
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-growflex-shrinkflex-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-directionflex-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の方向上書きされるプロパティ上書きする値
    columnjustify-contentflex-start