Flexbox code generator

Settings

Code

HTML
CSS

Preview

Click in item to change preview text.

Item
Item
Item
Item
Item

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 »