CSS Flex

Topics Covered:
1. What is Flexbox?
2. Uses of Flexbox.
3. Important terminologies.
4. Flex properties.
a. Flex container properties.
b. Flex item properties.

Topics in Detail:
Flexbox:
● Flexbox is a one-dimensional layout model, where flex means flexible length on
flexible items.
● The flexbox layout must have a parent element(container) with the display
property “flex”. So that the child elements of the container automatically become flex
items.

● Flexbox provides an easy way to arrange items within a container.

● Flexbox aligns and distributes space among the items in the container even when
the size of the items is unknown or dynamic.
● Flexbox expands/shrinks to fill available space/prevent overflow and distributes
space among the items.
● Flexbox is used for creating small-scale layouts.
● Flexbox aligns the items vertically and horizontally using rows and columns.

Flexbox uses:
● The flexbox makes the website/web app behave in a similar manner even when they
are viewed on different devices that have different screen sizes.
● To create responsive and mobile-friendly websites/web apps flexbox can be used.
Important terminologies:
● The two main components of flexbox are flex container and flex item.
○ Flex container: Property of parent element that is declared with display
property flex.

○ Flex item: Properties of child elements. There may be one or many flex
items.
● Flex layout is based on flex-flow directions, which are used in displaying the flex
items. Flexbox has two axes.
○ Main axis: The primary axis along with the flex items are laid out.
○ Cross axis: The axis perpendicular to main axis is called cross axis.

NOTE: It is not necessary that the main axis should always be horizontal, it depends
on the flex-direction property. The main axis and cross axis are perpendicular to
each other.
Flex properties:

Flex container properties:

Property Value and Description

display flex Enables flex context to all direct children of the container.

flex-direction Specifies the direction of flex items in the main axis.

flex-direction row Default value, left to right.

flex-direction row-reverse Right to left.

flex-direction column Top to bottom.

 Property Value and Description

flex-direction column-reverse Bottom to top.

flex-wrap Specifies whether the flex items should wrap or not when there is no enough
space in a line.

flex-wrap nowrap Wrapping will not happen, all flex items will be in one line.

flex-wrap wrap Flex items will be wrapped in multiple lines depending on the
number of items from top to bottom.

flex-wrap wrap-reverse Flex items will be wrapped in multiple lines depending on the
number of items from bottom to top.
 Property Value and Description

flex-flow Shorthand property for flex-direction and flex-wrap.

justify-content To align flex items on the main axis.

justify-content flex-start Default value. Flex items will be packed towards the start of
the flex-direction.

justify-content flex-end Flex items will be packed towards the end of the
flex-direction.

justify-content center Flex items will be centered along the container line.

justify-content space-between Flex items will be evenly distributed along the container line.
justify-content space-around Flex items will be evenly distributed along the container line
with equal space around them.

Property Value and Description

justify-content space-evenly Flex items will be evenly distributed along the container line.
The space between all the items and items to edges are

even.

align-items To align the flex items on the cross axis.

align-items flex-start Flex items will be placed in the start of the cross axis.

align-items flex-end Flex items will be placed at the end of the cross axis.

align-items center Flex items will be placed in the center of the cross axis.
align-items stretch All flex items will be aligned in the same space in cross axis
by stretching the container.

Property Value and Description

align-items baseline Baseline of the flex items will be aligned.

align-content To align the flex lines. It will be effective only on multi-line flex containers where
the flex-wrap property is either wrap or wrap-reverse. Similar to align-items but
here the flex lines are aligned.

align-content flex-start
align-content flex-end

Property Value and Description

align-content center

align-content stretch
align-content space-between

Property Value and Description

align-content space-around

gap To control space between flex items.

Flex item properties:

Property Value Description

order Value must be a number. Default value is Specifies the order of flex items.
0.

flex-grow Value must be a number. Default value is To make the flex item grow with
0. respect to given value.

flex-shrink Value must be a number. Default value is To make the flex item shrink with
1. If the value is given as 0, it won’t let the respect to given value.
flex item shrink.

Property Value Description

flex-basis Length (px, %, rem, etc…) The value will be assigned as the
default size of the flex item and the
remaining space will be distributed.

flex Shorthand property for flex-grow, flex-shrink, flex-basis.

align-self Specifies the alignment for selected flex items inside the container.

align-self flex-start
align-self flex-end

align-self center

align-self baseline

align-self stretch