Properties
Many of the properties of flexbox can become a little confusing after just learning it. This can be a guide to help with basic understanding of what it does.
Parent (flex container)
- display
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
- gap, row-gap, column-gap
Children (flex items)
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
- justify-self
Parent Properties
display
This defines a flex container. All children will be a flex
item.
.flex-container {
display: flex;
}
flex-direction
This defines the main axis. This will make the flex items either in rows or columns in either normal or reversed directions.
Values | Description |
---|---|
row | left to right |
row-reverse | right to left |
column | top to bottom |
column-reverse | bottom to top |
NOTE:
Default value is row
when display: flex
is the only flex
property in the container.
Setting
flex-direction
will build items based on theirwidth
andheight
properties. If set lower than the size of the container, a gap will be at the end of the direction.
flex-wrap
Without a wrap property, items will try to be on the same line. Enabling flex-wrap
will allow items to move to the next line based on the width.
Values | Description |
---|---|
row | wrap items from top to bottom |
wrap-reverse | wrap items from bottom to top |
nowrap | all items will be on one line |
flex-flow
Shorthand for flex-direction
and flex-wrap
, which can be used to form a one-line syntax. Default values are row nowrap
.flex-container {
display: flex;
flex-flow: row-reverse wrap-reverse;
/* Same as
flex-direction: row-reverse;
flex-wrap: wrap-reverse; */
}
justify-content
Defines alignment along the main axis.
Values | Description |
---|---|
flex-start | Items are packed toward the start of the flex-direction
|
flex-end | Items are packed toward the end of the flex-direction
|
start | Items are packed toward the start of the writing-mode direction |
end | Items are packed toward the end of the writing-mode direction |
left | Items are packed toward the left of the container |
right | Items are packed toward the right of the container |
center | Items are center along the line |
space-between | Items are evenly distributed in the line with the first on the start line and last item on the end line |
space-around | Items evenly distributed within the line between and half on the outside |
space-evenly | Items will be distributed with same spacing between items and the start and end of the container |
Two additional keywords go along with this property with values : safe
and unsafe
.
Safe will prevent items from rendering off-screen and unable to be scrolled to.
align-items
Defines behavior along the cross axis, similar to how justify-content
works.
Values | Description |
---|---|
stretch | Stretches columns to fill the container, but respect min-width and max-width ; this is the default behavior |
flex-start/start/self-start | Items are placed at the start of the cross axis |
flex-end/end/self-end | Items are placed at the end of the cross axis |
center | Items are placed on the center of the cross axis |
baseline | Items are aligned so their baselines align |
The
safe
andunsafe
modifiers work here.
align-content
The functions similar to align-items
, but only takes effect on multi-line flex containers if flex-wrap
is set to either wrap
or wrap-reverse
.
If flex-wrap
is set to nowrap
, then align-content
will do nothing.
Values | Description |
---|---|
normal | Reflects the default position of the items as if no value was set |
flex-start/start |
flex-start respects flex-direction , start respects writing-mode direction |
flex-end/end |
flex-end respects flex-direction , start respects writing-mode direction |
center | Items are centered with the flex container |
space-between | Items are evenly distributed, first line at the start of the container and the last line at the end of the container |
space-around | Items are evenly distributed evenly between each line, and half space at top of first line and bottom of last line |
space-evenly | Items are evenly distributed with equal spacing around each line |
stretch | Lines are stretched to take up all remaining space with the flex container |
The
safe
andunsafe
modifiers work here.
gap, row-gap, column-gap
The gap
property is a shorthand use for combining row-gap
and column-gap
into one line for styling.
.flex-container {
display: flex;
gap: 10px 20px; /* row-gap column-gap */
/* Same as
row-gap: 10px;
column-gap: 20px; */
}
Children Properties
order
This will allow for items to be displayed in a given order.
.flex-item-1 {
order: 5;
}
flex-grow
An item with a grow of greater than 1 will taken up that much space as the container size is increased.
.flex-item-1 {
flex-grow: 1;
}
.flex-item-2 {
flex-grow: 2;
}
In this, .flex-item-2
will grow and fill in twice as much space than .flex-item-1
will.
flex-shrink
The same for flex-shrink
, items shrink more if the value is higher than other items.
.flex-item-3 {
flex-shrink: 1;
}
.flex-item-4 {
flex-shrink: 2;
}
flex-basis
This defines the default size of an element before the remaining space is distributed.
flex
This is shorthand for flex-grow
, flex-shrink
and flex-basis
. The second and third parameters are optional.
The default values are: 0 1 auto
.
align-self
This will work just the same as align-items
, but only for the child component it is declared.
justify-self
This will work in a similar fashion to justify-content
and is for the flex item along.
Top comments (0)