The flex property
The flex property is shorthand for
flex-basis,
flex-shrink
and
flex-grow.
It applies to: a specific flex block.
The order doesn't matter. The second and third
parameters (flex-shrink, flex-basis)
are optional.
Values
See corresponding properties.
Default value: 0 1 auto.
Example
Let us have 3 elements. The width of
each of them is 200px and a total of
600px, which is greater than the width
of the parent container, which is 300px.
Let's assign a width of 200px for the
first element, 300px for the second element,
and 100px for the third element. For all
elements, let the value of flex-basis be
equal to 1, and flex-shrink - 1,
2, 3 in accordance with the
index number of the element:
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem2">3</div>
</div>
.parent {
display: flex;
width: 350px;
height: 200px;
border: 1px solid red;
}
.child {
width: 200px;
height: 50px;
border: 1px solid green;
}
.elem1 {
flex: 200px 1 1;
}
.elem2 {
flex: 300px 1 2;
}
.elem3 {
flex: 100px 1 3;
}
:
See also
-
the
flex-directionproperty
that specifies a direction of the flex block axes -
the
justify-contentproperty
that sets an alignment along the cross axis -
the
align-itemsproperty
that sets an alignment along the cross axis -
the
flex-wrapproperty
that sets the multi-line nature of flex blocks -
the
flex-flowproperty
a shorthand for flex-direction and flex-wrap -
the
orderproperty
that specifies an order of flex blocks -
the
align-selfproperty
that specifies an alignment of a single block -
the
flex-basisproperty
that sets a size of a certain flex block -
the
flex-growproperty
that sets a greediness of flex blocks -
the
flex-shrinkproperty
that sets a shrink of flex blocks
