What is Flexbox?
CSS Flexible Box Layout is a module of CSS that defines a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can "flex" their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.
CSS Definitions
- flex
- The flex CSS property is a shorthand property specifying the ability of a flex item to alter its dimensions to fill available space. Flex items can be stretched to use available space proportional to their flex grow factor or their flex shrink factor to prevent overflow.
- flex-direction
- The flex-direction CSS property specifies how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).
- flex-wrap
- The CSS flex-wrap property specifies whether flex items are forced into a single line or can be wrapped onto multiple lines. If wrapping is allowed, this property also enables you to control the direction in which lines are stacked.
- justify-content
- The CSS justify-content property defines how the browser distributes space between and around content items along the main axis of their container.
- align-items
- The CSS align-items property defines how the browser distributes space between and around flex items along the cross-axis of their container. This means it works like justify-content but in the perpendicular direction.
- align-content
- The CSS align-content property defines how the browser distributes space between and around content items along the main-axis of their container, which is serving as a flexible box container.
Learn more about Flexbox on the Mozilla Developer's Network »