To create a flexbox, set the
on the parent container element to
a block-level flex container or
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 specifies how
flex items flow within a flex container by setting the container's
main axis either horizontally (like rows) or vertically
row, flex items are added from left to right
row-reverse, flex items start on the right and are added on the left.
column, flex items are added from top to bottom
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
property is set to
are reversed if the
direction property is
In the flex container above, the
is indicated by a blue arrow in the upper left corner.
By default, flex items are laid out in a single line
(row or column). Setting the
allows content to wrap onto multiple lines (rows or columns)
while setting the direction of the cross axis in the process.
flex-direction is set to
wrap, flex items will wrap from top
to bottom (
wrap-reverse would make flex items
wrap from bottom to top).
flex-direction is set to
is set to
wrap, flex items will wrap from left
to right (
wrap-reverse would make flex items
wrap from right to left).
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.
A shorthand property for 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
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 aligns a flex
container's lines along the cross axis when there is extra
space, similar to how
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
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
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
flex-basis property specifies the initial
main size of a flex item. Defined as a number followed by
a absolute unit such as
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
A shorthand property for the
It's recommended to use the shorthand over the individual
properties as the shorthand correctly resets any unspecified
components to accommodate common uses. The initial value
0 1 auto
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.
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
negative values are permitted.
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)
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.
This site is a resource where you can learn about flexbox and test out various basic flexbox layouts. The playground area allows you to manipulate the flex container and flex items quickly and easily without having to write any code. It's a work-in-progess that will be updated with examples, frequently asked questions, and new information as standards evolve.
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.
flex-directionproperty establishes the main axis.
justify-contentproperty defines how flex items are laid out along the main axis on the current line.
align-itemsproperty defines the default for how flex items are laid out along the cross axis on the current line.
align-selfproperty defines how a single flex item is aligned on the cross axis, and overrides the default established by
The flex items' agnostic equivalents of height and width are main size and cross size, which respectively follow the main axis and cross axis of the flex container.
The main start/main end and cross start/cross end sides of the flex container describe the origin and terminus of the flow of flex items. They follow the main axis and cross axis of the flex container in the vector established by the writing-mode (left-to-right, right-to-left, etc.).
inline-flexvalues of the display property.
Each child of a flex container becomes a flex item. Text directly contained in a flex container is wrapped in an anonymous flex item.
Flex items can be laid out on either a single line or on several lines according to the flex-wrap property, which controls the direction of the cross axis and the direction in which new lines are stacked.