Basic concept of flexbox-
Flexbox is a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities.
Flexbox is one dimensional layout model therefore it deals with one dimension at a time (i.e. row or column direction).
Two Axes of flexbox-
The two main axes of flexbox are main axis and cross axis.
Main axis is defines by the flex direction property.The main axis of flex container is primary axis on which all flex items are aligned.
Cross axis referes to the axis perpendicular to the main axis.Its direction is depends on main axis direction.
Have a look on below image for better understanding.
- In the above image flex direction is row(i.e horizontal) so main axis is horizontal axis and cross axis is perpendicular to it (i.e vertical axis ).
Flexbox Properties-
1) Display :
For making a flex container we need to set display property value to flex or inline flex.
All the directs childrens of that container will become flex-items.
After creating flex container all the the items will display in row(i.e. by default flex-direction set to row)
2) Flex-direction :
This property defines the main axis of flexbox and all the items align on that axis.
We can change this property value to the following values,
row- This value align items from left to right starting from left end of container.
row-reverse- This value align items from right to left starting from right end of container.
column- This value align items vertically starting from top end to the bottom end.
column-reverse - This value align items vertically starting from the bottom end to the top end.
In below code uncomment and check with other values also.
3) Flex-wrap :
This property will help to wrap items on multiple lines.
If your items are too large to display in one line then items will wrap to next line.
We can set property value to the following values,
wrap : Items are too large to display then items will wrap on new line.
nowrap : Items will display on one line.
wrap-revrese : Items will wrap on new line from bottom to top.
Flex-flow : It is a shorthand of flex-direction and flex-wrap.We can set value direction and wrap on one line.(flex-flow: row wrap)
4) Justify content :
This property used to set items on main axis.
This property defines how browser distributes space between and around content items on main axis.
We can set following property values,
Flex-start : Align items from start of flex.
Flex-end : Align items from end of flex.
center : Align items at the center of the flex container.
space-between : Items will align in the flexbox container in such a way that first item on container start line and last item on container end line and space will evenly distributed in between items.
space-around : Items will align on the same line and equal space around them.Each item will have equal sapce to both sides(i.e. left and right side for horizontal axis and top and bottom for vertical axis).
space-evenly : Items will align with equal space in between items and same space between edges of the container and items.
In below code uncomment and check with other values also.
5) Align-items:
This property used to set items on cross axis.
This property defines how browser distributes space between and around content items on cross axis.
We can set following property values,
Flex-start : Align items from start of flex.
Flex-end : Align items from end of flex.
center : Align items at the center of the flex container.
space-between : Items will align in the flexbox container in such a way that first item on container start line and last item on container end line and space will evenly distributed in between items.
space-around : Items will align on the same line and equal space around them.Each item will have equal sapce to both sides(i.e. left and right side for horizontal axis and top and bottom for vertical axis).
strech : It is the default value of this align-items property. It stretches the items to fill the available space of the flex container while respecting the width and height constraints.
6) Align-content:
The align-content property is similar to align-items but it only takes effect on multiline flexible containers where the flex-wrap property is set to either wrap or wrap-reverse. It's default value is stretch and a single line flexible container will not have any effect for this property.
It has same properties like align-items,
- flex-start
- flex-end
- center
- space-between
- space-around
- strech
have a look on below code for better understanding,
7] Gap:
The gap property explicitly controls the space between flex items. It applies that spacing only between items not on the outer edges.
Row-gap : It applies sapce bertween the rows of the container.
Column-gap : It applies space between the columns of the container.
8] Order :
Order property controls the order of item in which they appear in container of flex.
By default items appear in the container as per the source order.
9] Flex-grow :
This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion.
It dictates what amount of the available space inside the flex container the item should take up.
10] Align-self :
This property helps us to position particular item in the flex container.
We can use following property values
- flex-end
- flex-start
- center
For practice and better understanding you can play below flexbox game