CSS Flexbox Generator CSS Flexbox Generator


xItem 1

The following properties affect the flexbox container.
Default values marked with

display property

To create a flexbox, set the display property on the parent container element to flex for a block-level flex container or inline-flex for an inline-level flex container. Both of these values define the element as a "flex container" and its children as "flex items".

flex-direction property

The flex-direction property specifies how flex items flow within a flex container by setting the container's main axis either horizontally (like rows) or vertically (like columns).

  • With the flex-direction set to row , flex items are added from left to right
  • With the flex-direction set to row-reverse , flex items start on the right and are added on the left.
  • With the flex-direction set to column , flex items are added from top to bottom
  • With the flex-direction set to column-reverse , flex items start on the bottom and are added on the top.

This property also defines the cross axis (which is perpendicular to the main axis) which is implemented when the flex-wrap property is set to wrap or wrap-reverse . Note that row and row-reverse are reversed if the direction property is rtl .

In the flex container above, the flex-direction is indicated by a blue arrow in the upper left corner.

flex-wrap property

By default, flex items are laid out in a single line (row or column). Setting the flex-wrap property allows content to wrap onto multiple lines (rows or columns) while setting the direction of the cross axis in the process.

If the flex-direction is set to row or row-reverse and flex-wrap is set to wrap , flex items will wrap from top to bottom (wrap-reverse would make flex items wrap from bottom to top).

If the flex-direction is set to column or column-reverse and flex-wrap is set to wrap , flex items will wrap from left to right (wrap-reverse would make flex items wrap from right to left).

When the flex-wrap property is set to nowrap , flex items will be added to fit the flex container and overflow the container if the flex items can't be shrunk to fit. Note that the wrapping of columns will be reversed if the direction property is rtl.

In the flex container above, the cross axis is indicated by a green arrow in the upper right corner.

justify-content property

The justify-content property specifies how the browser distributes space between and around flex items along the main axis of their container.

  • flex-start : Pack flex items at the start of the main axis (akin to left justified if the flex-direction was row)
  • flex-end : Pack items at the end of the main axis (akin to right justified if the flex-direction was row)
  • center : Pack items around the center (akin to centered)
  • space-between : Distribute items evenly with the first item at the start and the last at the end
  • space-around : Distribute items evenly with equal space around each item

align-items property

Similar to justify-content but for the perpendicular cross axis direction.

  • flex-start : Align to cross axis start
  • flex-end : Align to cross axis end
  • center : Center flex items along the cross axis
  • baseline : Align the flex items’ baselines
  • stretch : Stretch flex items to fit their container along the cross axis

align-content property

The align-content property aligns a flex container's lines along the cross axis when there is extra space, similar to how justify-content aligns individual items within the main axis. This property has no effect on single line flexible boxes .

  • flex-start : Pack lines from the cross-axis start
  • flex-end : Pack lines from the cross-axis end
  • center : Pack lines around the cross-axis center
  • space-between : Distribute lines along the cross-axis, start to end
  • space-around : Distribute lines along the cross-axis, equally spaced
  • stretch : Stretch lines to occupy the whole cross-axis

The following properties affect flexbox items.
Click an item in the flex container to modify it.

flex-grow property

The flex-grow property specifies the "flex grow factor" of a flex item which determines how much the flex item will grow relative to the rest of the flex items in the flex container when positive free space is distributed (negative numbers are invalid). The initial value is 0 .

flex-shrink property

The flex-shrink property specifies the "flex shrink factor" of a flex item which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed (negative numbers are invalid). Note: The flex shrink factor is multiplied by the flex base size when distributing negative space. This distributes negative space in proportion to how much the item is able to shrink, so that e.g. a small item won't shrink to zero before a larger item has been noticeably reduced. The initial value is 1

flex-basis property

The flex-basis property specifies the initial main size of a flex item. Defined as a number followed by an absolute unit such as px , mm or pt , or a percentage of the parent flex container main size property. Negative values are invalid. It takes the same values as the width property. The initial value is auto

align-self property

Aligns flex items of the current flex line overriding the flex container's align-items value. The initial value is auto.

  • auto : Computes to parent's align-items value or stretch if the element has no parent.
  • flex-start : The cross-start margin edge of the flex item is flushed with the cross-start edge of the line.
  • flex-end : The cross-end margin edge of the flex item is flushed with the cross-end edge of the line.
  • center : The flex item's margin box is centered within the line on the cross-axis. If the cross-size of the item is larger than the flex container, it will overflow equally in both directions.
  • baseline :All flex items are aligned such that their baselines align. The item with the largest distance between its cross-start margin edge and its baseline is flushed with the cross-start edge of the line.
  • stretch : Flex items are stretched such as the cross-size of the item's margin box is the same as the line while respecting width and height constraints.

order property

Controls the order in which children of a flex container appear inside the flex container. Flex items are, by default, displayed and laid out in the same order as they appear in the source document. A flex container lays out its content in order-modified document order, starting from the lowest numbered ordinal group and going up. Items with the same ordinal group are laid out in the order they appear in the source document. The inital value is 0 and negative values are permitted.

width:

height:

What is Flexbox?

Flexbox is a way to layout elements to accommodate different screen sizes. Flexbox does not rely on floats and margins, and the flex container's margins don't collapse with the margins of its contents. Note that some browsers need prefixes to use these features.

 


The "flex" in flexbox comes from its ability to alter its items' width, height and order to best fill the available space. Flexible items expand and shrink to fill the available space.

Flexbox content begins with a container whose display property is set to flex or inline-flex. Any elements within that container are now automatically flex-items. Every flexible box layout follows two axes. The main axis is the axis along which the flex items follow each other. The cross axis is the axis perpendicular to the main axis. For example, if we have the flex-direction set to row, the main axis is horizontal (left to right unless the direction is set rtl) and the cross direction is vertical (top to bottom)

What isn't Flexbox?

The answer to every layout problem. Like any tool, flexbox has its place in your toolbox, but it's not meant to be a cure-all for every layout issue.

Properties Used
  • The display property defines how a particular HTML element should be displayed.
  • The flex-direction property indicates the direction in which the flex elements are located inside the container.
  • The flex-wrap property determines whether the flex container will be single-line or multi-line. If multi-line is enabled in the container, this property also allows you to control the direction in which the flex elements are placed.
  • The justify-content property determines how the browser distributes the space between and around the flex elements along the main axis of the container (horizontally), or aligns the entire grid layout along the axis of the grid container row.
  • The align-items property aligns all the elements inside the flex container along the transverse axis, or aligns all elements of the grid layout along the axis of the column.
  • The align-content property determines how the browser distributes the space between and around the flex elements along the transverse axis of the container (vertically), or aligns the entire grid layout along the axis of the grid container column.
  • The flex-grow property indicates how much an element can increase in relation to other flex elements in one container.
  • The flex-shrink property determines how the element will be compressed relative to other flex elements in the container (with a lack of free space).
  • The flex-basis property defines the default size for the flex element before allocating space in the container.
  • The align-self property specifies the alignment of individual row elements inside a flex container, or aligns a grid layout element inside a cell along the column axis of a grid container.
  • The order property sets the order of the flex element in the container relative to the rest.