1.8 KiB
title |
---|
Flex Property |
Flex Property
flex
property is a shorthand to specify a flexible item's size. flex-grow
, flex-shrink
and flex-basis
can be specified within this shorthand property.
This property has no effect if the element is not a flex-item
. Flex item is an element that is a direct child of a container parent with display property as flex
or inline-flex
.
Syntax
Possible variations in syntax listed below. flex-grow
and flex-shrink
take a whole number as value. flex-basis
takes regular size units such as px, em, rem...etc.
flex: <flex-grow> <flex-shrink> <flex-basis>;
flex: <flex-basis>;
flex: <flex-grow>;
flex: <flex-grow> <flex-basis>;
flex: <flex-grow> <flex-shrink>;
flex-basis
specifies the size of the element along main axis. Within a container, the main axis is defined by flex-direction
. The main axis is horizontal when flex-direction
is row
. Vertical when the flex-direction
is column
.
flex-basis: 20px
would set initial width of the element to 20px
if the flex-direction
is row
. The same flex-basis
would apply to height if the fle-direction
is column
.
flex: 20px
would automatically mean flex-basis: 20px
, as the shorthand property has only flex-basis
as the property that can take a value with unit.
flex: 2
specifies flex-grow: 2
and the element would grow twice longer/taller than other elements with flex-grow: 1
.
flex: 1 2
specifies flex-grow: 1
and flex-shrink: 2
. The element grows to take up empty space in proportion with other elements with flex-grow: 1
but shrinks twice as smaller when compared other elements with flex-shrink: 1
when pressed against space.
More Information
flex
property reference on MDN