With Flexbox, you can specify the layout of an element and its children to provide a consistent layout on different screen sizes.

410

Flex Items

Flex Direction

Setting the Flex Direction establishes the main axis and direction that child elements are placed along in the layout.

Configuration

PropertyDescription
RowPlaces child elements horizontally.
ColumnPlaces child elements vertically.
Row ReversePlaces child elements horizontally and additionally reverses the order that the elements are displayed.
Column ReversePlaces child elements vertically and additionally reverses the order that elements are displayed.

Align Items

Setting align items determines how child elements are spread across the remaining space of the cross axis (the opposite of the axis set in Flex Direction) they lie on.

Configuration

PropertyDescription
Flex StartChild elements are positioned at the beginning of the container.
Flex EndChild elements are positioned at the end of the container.
CenterChild elements are positioned in the center of the container.
StretchChild elements will stretch to fill the container.
BaselineChild elements are positioned so that their baselines are lined up with each other.

Justify Content

The Justify Content property determines how children elements are spread across the remaining space of the axis they lie on.

Configuration

PropertyDescription
Flex StartChild elements are grouped together and positioned at the beginning of the line.
Flex EndChild elements are grouped together and positioned at the end of the line.
CenterChild elements are grouped together and centered in the middle of the line.
Space BetweenThe first child element is positioned at the beginning, the last child element is positioned at the end and all remaining child elements are spread out evenly in between.
Space AroundChild elements are spread out across the line with equal amounts of space surrounding them.
Space EvenlyItems are distributed so that the spacing between any two adjacent alignment subjects, before the first alignment subject, and after the last alignment subject is the same.

Selected Item

Align Self

Align Self shares the same positioning behavior as align items, however, it is set on each individual child element and overrides the settings applied to the parent element in Align Items.

Configuration

PropertyDescription
Flex StartThe child element will be positioned at the beginning of the container.
Flex EndThe child element will be positioned at the end of the container.
CenterThe child element will be positioned in the center of the container.
BaselineThe child element will stretch to fill the container.
StretchThe child element will stretch to fill the container.

Flex

The Flex will define how your items are going to “fill” over the available space along your main axis. Space will be divided according to each element's flex property.

The default value is auto.

391

In the Advanced section, you can also set value for the following properties:

Flex Grow

The Flex Grow property describes how a child element will automatically resize itself in relation to other child elements within a parent element.

Configuration

Flex grow can be set to any number greater than 0.

Flex Shrink

Flex Shrink is generally used in tangent with Flex Grow and determines the behavior of children elements once they exceed the size of the container. Just like Flex Grow, Flex Shrink sets a relative value on the children elements. Setting an element's Flex Shrink to 0 prevents the element from shrinking at all and will retain its original size calculated from the Flex Grow setting or from the set width and height.

Configuration

Flex Shrink can be set to any number greater than 0, with 1 being the default value.

Flex Basis

Flex basis is an axis-independent way of providing the default size of an item along the main axis. Setting the flex basis of a child is similar to setting the width of that child if its parent is a container with flex direction: row or setting the height of a child if its parent is a container with flex direction: column. The flex basis of an item is the default size of that item, the size of the item before any flex grow and flex shrink calculations are performed.

Configuration

Flex Shrink can be set to any number greater than 0, with 1 being the default value.

Content

Flex Wrap

The Flex Wrap property is set on a container and determines how child elements will be laid out if they exceed the maximum dimensions of the container.

Configuration

PropertyDescription
NoneForces all of the child elements onto one line and which has the potential to force shrink the elements in order to make them fit on the same line.
WrapThe child elements will be placed along multiple lines, as needed, allowing them to retain their intended sizes.
ReverseThe same as Wrap, however the order of the child elements is reversed.

Align Content

Align Content is only applicable when children elements are in a container that is set to flex wrap and there are multiple lines of children elements. Setting the Align Content property determines how the lines of elements are positioned on the cross-axis (the axis opposite of the main axis defined in Flex Direction).

Configuration

PropertyDescription
Flex StartLines are grouped together and positioned at the beginning of the cross axis.
Flex EndLines are grouped together and positioned at the end of the cross axis.
StretchLines are stretched to the height of the container's cross axis.
CenterLines are grouped together and positioned in the center of the container's cross axis.
Space BetweenThe first line is positioned at the beginning of the cross axis, the last element is positioned at the end of the cross axis, and all remaining lines are spread out evenly in between.
Space AroundAll the lines are spread out across the cross axis of the container with equal amounts of space surrounding them.

Additional Resources