Introduction
Flex is a one-dimensional layout model, which provide powerful capabilities for content justifying and alignment. There are two axes in flex: main axis and cross axis. It’s called one-dimensional because flex always deals with layout in one dimension. Flex layout provides flexible controls on layouts, which is completely out of box compared to traditional box model.
Core Concept
The two axes of flex
Main axis and cross axis are the core concepts in flex. The main axis is the direction that content should extend, which is defined by flex-direction
property. Then the cross axis is exactly perpendicular to the main axis.
Flex container and flex items
Flex container is the element using the flex layout, which is defined with display: flex
or display: inline-flex
. As we set flex container, its direct children become flex items. When setting flex container and flex items, they will behave as the following:
- Items display in a row (the
flex-direction
property isrow
by default). - The items start from the start edge of the main axis.
- The items do not stretch on the main axis, but can shrink.
- The items will stretch to fill the size of the cross axis.
- The items’
flex-basis
property is set toauto
. - The container’s
flex-wrap
is set tonowrap
. If the items overflow the container, the overflowed content will be hidden. Otherwise, more items could be fit into the container.
When flex-wrap
is set to wrap
, flex items will be wrapped into multiple lines when they are overflowed. Each line should be considered to be a flex container. Space distribution works the same way as in one line for each container.
flex-direction
and flex-wrap
flex-direction
controls the direction of flex items on the main axis. flex-wrap
controls whether flex items are wrapped into multiple lines when they overflow.
flex-basis
, flex-grow
and flex-shrink
These three properties are to determined flex container’s distribution of available space for flex items. flex-basis
controls the width of the flex item, which it’s set to auto
by default. flex-grow
causes the flex item grow along the main axis if set to a positive integer. flex-grow
will not make the flex item’s width greater than max-width
if it’s set. flex-shrink
works opposite to flex-grow
, in the way that when flex container doesn’t have enough space for flex items, items with flex-shrink
set to a positive integer will shrink its width to fit the container. But the width of the flex item will not smaller than min-content
and min-width
if the min-width
is set. flex
property is a shorthand for flex-grow
flex-shrink
flex-basis
, which default value is initial
, equal to 0 1 auto
.
justify-content
and align-items
justify-content
is used to distribute the space between flex items on main axis. align-items
will align flex items on the cross axis.