CSS - box-flex-group

See Flexbox for more information.


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

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


Any positive integer.

Formal syntax

<a href="css/integer" title=""><integer></a>


Warning: This is a property of the original CSS Flexible Box Layout Module standard which is being replaced by a new standard.

See Flexbox for more information.

The CSS box-flex-group property assigns the flexbox's child elements to a flex group. See Flexbox for more about the properties of flexbox elements.

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
Computed valueas specified
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser Compatibility  

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes)-webkit ? No support (Yes)-webkit 1.1-khtml
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? No support ? 1.0-webkit

See Also  

box-flex, box-ordinal-group, box-pack


Flexible Box Layout Module (W3C Working Draft)

Note: The current state of this specification does not reflect Mozilla's or WebKit's implementation.

Old Flexible Box Layout Module

Note: WebKit and Mozilla's implementations reflect this version of the specification.


© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.

CSS CSS Property NeedsBrowserCompatibility NeedsExample NeedsMobileBrowserCompatibility Non-standard Reference