Flex Container - MDN Web Docs Glossary: Definitions of Web-related terms 编辑

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.

Learn more

Property reference

• align-content
• align-items
• flex
• flex-direction
• flex-flow
• flex-wrap
• justify-content

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