| Flex Property |
Values |
Description |
Example Usage |
| display: flex; |
flex |
Sets the element as a flex container, enabling flex properties on its child elements. |
<div style="display: flex;">... |
| justify-content |
flex-start, flex-end, center, space-between, space-around |
Specifies how flex items are distributed along the main axis of the flex container.
flex-start: Items are aligned at the start of the container.flex-end: Items are aligned at the end of the container.center: Items are centered within the container.space-between: Items are evenly distributed with space between them.space-around: Items are evenly distributed with space around them.
|
<div style="justify-content: flex-start;">... |
| align-items |
flex-start, flex-end, center, baseline, stretch |
Specifies how flex items are aligned along the cross axis of the flex container.
flex-start: Items are aligned at the start of the cross axis.flex-end: Items are aligned at the end of the cross axis.center: Items are centered along the cross axis.baseline: Items are aligned based on their text baseline.stretch: Items are stretched to fill the container along the cross axis.
|
<div style="align-items: flex-start;">... |
| flex-direction |
row, row-reverse, column, column-reverse |
Specifies the direction of the main axis and cross axis within the flex container.
row: Items are laid out horizontally in the order they appear.row-reverse: Items are laid out horizontally in reverse order.column: Items are laid out vertically in the order they appear.column-reverse: Items are laid out vertically in reverse order.
|
<div style="flex-direction: row;">... |
| flex-wrap |
nowrap, wrap, wrap-reverse |
Specifies whether flex items should wrap or stay on a single line.
nowrap: Items are forced to stay on a single line.wrap: Items wrap onto multiple lines if necessary.wrap-reverse: Items wrap onto multiple lines in reverse order.
|
<div style="flex-wrap: nowrap;">... |
| flex-grow |
number |
Specifies the ability for a flex item to grow if necessary within the flex container. |
<div style="flex-grow: 1;">... |
| flex-shrink |
number |
Specifies the ability for a flex item to shrink if necessary within the flex container. |
<div style="flex-shrink: 1;">... |
| flex-basis |
length, auto |
Specifies the initial size of a flex item before any remaining space is distributed.
length: Specifies a fixed length for the flex item.auto: The default size of the flex item based on its content.
|
<div style="flex-basis: 100px;">... |