この記事はまだボランティアによって 日本語 に翻訳されていません。ぜひ MDN に参加して翻訳を手伝ってください!
この記事を English (US) で読むこともできます。

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

This is a property of the original CSS Flexible Box Layout Module draft, and has been replaced by a newer standard. See flexbox for information about the current standard.

The box-flex-group CSS property assigns the flexbox's child elements to a flex group.

/* <integer> values */
box-flex-group: 1;
box-flex-group: 5;

/* Global values */
box-flex-group: inherit;
box-flex-group: initial;
box-flex-group: unset;

For flexible elements assigned to flex groups, the first flex group is 1 and higher values specify subsequent flex groups. The initial value is 1. When dividing up the box's extra space, the browser first considers all elements within the first flex group. Each element within that group is given extra space based on the ratio of that element's flexibility compared to the flexibility of other elements within the same flex group. If the space of all flexible children within the group has been increased to the maximum, the process repeats for the children within the next flex group, using any space left over from the previous flex group. Once there are no more flex groups, and there is still space remaining, the extra space is divided within the containing box according to the box-pack property.

If the box would overflow after the preferred space of the children has been computed, then space is removed from flexible elements in a manner similar to that used when adding extra space. Each flex group is examined in turn and space is removed according to the ratio of the flexibility of each element. Elements do not shrink below their minimum widths.

Initial value1
Applies toin-flow children of box elements
Inheritedno
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

The box-flex-group property is specified as any positive <integer>.

Formal syntax

<integer>

Specifications

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic support
DeprecatedNon-standard
Chrome No support ? — 67
Prefixed
No support ? — 67
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Edge ? Firefox ? IE No support NoOpera No support ? — 54
Prefixed
No support ? — 54
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Safari Full support 3
Prefixed
Full support 3
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Full support 1.1
Prefixed
Prefixed Requires the vendor prefix: -khtml-
WebView Android No support ? — 67
Prefixed
No support ? — 67
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Chrome Android No support ? — 67
Prefixed
No support ? — 67
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Edge Mobile ? Firefox Android ? Opera Android No support ? — 54
Prefixed
No support ? — 54
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Safari iOS Full support 1
Prefixed
Full support 1
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

See also

ドキュメントのタグと貢献者

最終更新者: ExE-Boss,