This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items).

1. Flexbox

2. Introduction
to
flexbox

3. The Flexbox Layout (Flexible Box) module (a W3C
Candidate Recommendation as of October 2017) aims
at providing a more efficient way to lay out, align and
distribute space among items in a container, even
when their size is unknown and/or dynamic (thus the
word "flex").

4. Since flexbox is a whole module and not a single property

5. Properties
Basically flex box contains two levels of properties
1. Flexbox container level properties
2. Flexbox item level properties
Img srcc : https://css-tricks.com

6. Container Properties

7. Axes of flexbox - Flex Direction
● Flex box are basically render by axes x and y
● The axes are defined by flex-direction it has
four properties
○ Row
○ Row-reverse
○ Column
○ column-reverse

8. Flex warp
flex-wrap: nowrap | wrap | wrap-reverse
● Basically the items in the flexbox container
would try to fit in single line
● And we can change that and allow the items to
wrap as needed with this property.
● Nowrap (default) : All flex items will be on one
line
● Wrap : flex items will wrap onto multiple lines,
from top to bottom.
● Warp-reverse : flex items will wrap onto
multiple lines from bottom to top.
Img src : https://css-tricks.com

9. Aligning Item in flex-container
One of the reasons that flexbox quickly caught the interest of web
developers is that it brought proper alignment capabilities to the web
for the first time. It enabled proper vertical alignment, so we can at last
easily center a box using justify contents, align-items and align-
contents .

10. Justify Contents
justify-content: flex-start | flex-end | center
| space-between | space-around | space-
evenly;
This defines the alignment along the main
axis.
● Flex-start : Pack items from the start
● Flex-end : Pack items from the end
● Center : Pack items around the center
● Space-between : Distribute the items evenly
and space between the items
● Space-around : Distribute the items Items
have a half-size space on either end
● Space-evenly : Distribute items evenly Items
have equal space around them
Img src : https://css-tricks.com

11. Align Items
It’s one the best property in the flex-box
which helps to control the vertical
alignment
align-items: flex-start | flex-end | center |
baseline | stretch
● Flex-start : Items are all aligned to
the start of the main axis
● Flex-end : Items are all aligned to
the end of the main axis
● Center : Items are all aligned to the
center of the container.
● Baseline : Items are aligned such as
their baselines align
● Stretch : Items are stretch to fill the
container

12. Align Contents
So far we have aligned the individual items
align-contents are help to align bunch of
items in the container.
align-content: flex-start | flex-end | center |
space-between | space-around | stretch;
● Flex-start : Items are start from main axis
● Flex-end : Items are start from end of main
axis
● Center : Items are centered in the container
● Stretch : Items are stretched to fill the
container
● Space-between : Items are evenly
distributed and space between them
● Space-around :Items are evenly distributed
and space around them

13. Order
Order : <number>
● The order CSS property sets the order
to lay out an item in a flex or grid
container.
● Items in a container are sorted by
ascending order value and then by
their source code order.

14. Flex Grow/Flex Shrink
Flex-grow : <number>
Flex-shrink : <number>
Flex grow:
The flex-grow CSS property sets how
much of the remaining space in the flex container
should be assigned to that item (the flex grow
factor). The remaining space is the size of the flex
container minus the size of all flex items together. If
all sibling items have the same flex grow factor, then
all items will receive the same share of remaining
space, otherwise it is distributed according to the
ratio defined by the different flex grow factors.
Flex shrink :
The flex-shrink CSS property sets the flex
shrink factor of a flex item. If the size of all flex items
is larger than the flex container, items shrink to fit
according to flex-shrink.

15. ThankYou