To generate a flex container, we set the display
property of an element to either flex
or inline-flex.
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.
Use 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.
Use 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-direction
and flex-wrap
at once.
justify-content
– used to align items on the main axis, that is, the direction that you set usingflex-direction.
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 asspace-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 asspace-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.
With 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.flex-start
,flex-end
andcenter
– works the same way they do when it comes main axis.align-content
– when items wrap onto multiple lines,align-content
sets the alignment of those lines inside the container.align-content
can be set with the same values thatjustify-content
accepts.
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-items
takes the same set of values thatalign-items
accepts.order
– helps changing the order of individual flex items without affecting the source order. By default, all items have an order value of0
, 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 defaultorder
value of0
.
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 toauto
, the main size of the flex item is used asflex 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 theflex-grow
property specified, grows to fill any available space.flex-shrink
– according to the given value, an item withflex-shrink
specified will basically become smaller than the size specified byflex-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 flex-grow
, flex-shrink
and flex-basis.
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.
flex: initial
– same asflex: 0 1 auto
. Item wouldn’t grow and would only shrink. Initial size is the main size or content size.flex: auto
– same asflex: 1 1 auto
. Item is allowed to both grow or shrink.flex: none
– same asflex: 0 0 auto
. Item cannot grow nor shrink.flex: <positive-number>
– equivalent to setting the same number for bothflex-grow
andflex-shrink
with0
forflex-basis.