Flex Container
A flexbox layout is defined using the flex
or inline-flex
values of the display
property on the parent item. This element then becomes a flex container, and each one of its children becomes a flex item.
A value of flex
causes the element to become a block level flex container, and inline-flex
an inline level flex container. These values create a flex formatting context for the element, which is similar to a block formatting context in that floats will not intrude into the container, and the margins on the container will not collapse with those of the items.
See also
Property reference
Further reading
- CSS Flexbox Guide: Basic Concepts of Flexbox
- CSS Flexbox Guide: Aligning items in a flex container
- CSS Flexbox Guide: Mastering wrapping of flex items
- Firefox Developer Tools > How to: CSS Flexbox Inspector: Examine Flexbox layouts