CSS Flexbox Generator
This CSS Flexbox Generator is a web-based tool designed to assist developers and designers in creating flexible and responsive layouts using Cascading Style Sheets (CSS) Flexbox. It provides a user-friendly interface where users can customize and visualize the arrangement of elements within a container, adjusting parameters such as the order, alignment, spacing, and sizing of these elements.
The following properties affect the flexbox container.
Default values marked with
display property ˅
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 ˅
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
- With the
row, flex items are added from left to right
- With the
row-reverse, flex items start on the right and are added on the left.
- With the
column, flex items are added from top to bottom
- With the
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.
flex-wrap property ˅
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.
justify-content property ˅
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 ˅
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 ˅
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
The following properties affect flexbox items.
Click an item in the flex container to modify it.
flex-grow property ˅
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 ˅
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 ˅
flex-basis property specifies the initial
main size of a flex item. Defined as a number followed by
an 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
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
negative values are permitted.
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.
- 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.