To generate a flex container, we set the
display property of an element to either
flex– creates a block-level flex container.
inline-flex– creates an inline-level flex container.
The direct descendants of the flex container are called flex items. The following image will further help you familiarize with the terms we will need to easily discuss the most common uses of the flexbox layout.
[Sketched using Excalidraw]
- Main axis – runs in the direction that the flex items are laid out. The start and end of the main axis are called the main start and main end respectively.
- Cross axis – runs in the perpendicular direction of the main axis. The start and end of the cross axis are called cross start and cross end respectively.
flex-direction to set the direction of the main axis.
row– main axis runs along the inline direction. If you work with a language written from left to right, main start is on the left.
row-reverse– same as row, but main start and main end are swapped.
column– main axis runs along the block direction.
column-reverse– same as column, but main start and main end are swapped.
flex-wrap to specify wrapping behavior of flex items inside the container.
nowrap– the items will stack along a single line. Will overflow if they are not set to shrink or they can’t shrink anymore due to the content inside.
wrap– items will wrap inside the container onto multiple lines.
You can use
flex-flow as a short hand to set both
flex-wrap at once.
justify-content– used to align items on the main axis, that is, the direction that you set using
flex-start– items will line up against the main start edge of the container.
flex-end– items will line up against the main end.
center– items will line up at the center of the container.
space-between– first and last items will be pushed to both edges and all the items will have an equal amount of space between each other.
space-around– same as
space-between, but items will have the same amount of space on either side of them, except for the first and last items, which will have half that size of space between them and the nearest edge of the container.
space-evenly– same as
space-around, but the first and last items will have the same space between them and the nearest edge that they have between them and the nearest item.
align-items, you can align the items along the cross axis, that is, the direction perpendicular to the main axis.
stretch– items stretch across the cross axis.
center– works the same way they do when it comes main axis.
align-content– when items wrap onto multiple lines,
align-contentsets the alignment of those lines inside the container.
align-contentcan be set with the same values that
Flex items also have their own properties that can be used to control their behavior inside a flex container.
align-self— controls alignment of an individual flex items across the cross axis. So,
align-itemstakes the same set of values that
order– helps changing the order of individual flex items without affecting the source order. By default, all items have an order value of
0, so flex items with higher value will move towards the main/cross end of the container. Similarly, negative values will move items towards to the main/cross start of the container, that is, they will appear before the items with the default
We can also take control of individual items by how they take up positive space or shrink to fit when their is negative space along the main axis.
flex-basis– basically the size of a flex item. If this is not set to
auto, the main size of the flex item is used as
flex basis.This is the value an item uses as the base value to grow and shrink from.
flex-grow– according to the given value, an item with the
flex-growproperty specified, grows to fill any available space.
flex-shrink– according to the given value, an item with
flex-shrinkspecified will basically become smaller than the size specified by
flex-basis, until all the items fit properly along the main axis.
Usually the three properties above are used combined into the shorthand property
flex in the order
While we are at it, it is also useful to be aware of the following predefined shorthand values which cover most of the use cases for
flex: initial– same as
flex: 0 1 auto. Item wouldn’t grow and would only shrink. Initial size is the main size or content size.
flex: auto– same as
flex: 1 1 auto. Item is allowed to both grow or shrink.
flex: none– same as
flex: 0 0 auto. Item cannot grow nor shrink.
flex: <positive-number>– equivalent to setting the same number for both