CSS Flexbox also known as Flexible Box Layout, is a powerful CSS layout module that provides a flexible way to arrange and align elements within a container. It offers an efficient way to create dynamic, responsive, and modern web layouts.

There are two concepts included in the CSS Flexbox mentioned below -

1. Container - The parent element that holds the flex items.
2. Flex items - The child elements which are available within the flex container are known as `flex items`.

To create a flex container, we need to apply the display: flex or display: inline-flex property to an element.

Flexbox Container Properties

All the Flexbox Container Properties are mentioned below -

1. flex-direction - Defines the direction of the flex items within the container. It can be row (default), row-reverse, column, or column-reverse.



div{ flex-direction: row; flex-direction: row-reverse; flex-direction: column; flex-direction: column-reverse; }



2. flex-wrap - Determines whether flex items should wrap if they exceed the container's width. Values are nowrap (default), wrap, or wrap-reverse.



div { flex-wrap: nowrap; flex-wrap: wrap; flex-wrap: wrap-reverse; }





3. justify-content - Aligns flex items along the main axis (horizontally). Options include flex-start (default), flex-end, center, space-between, space-around, or space-evenly.



div { justify-content: flex-start; justify-content: flex-end; justify-content: space-between; justify-content: space-around; justify-content: space-evenly; }



4. align-items - It is used to align the flex items along the cross axis. Values are stretch (default), flex-start, flex-end, center, or baseline.



div { align-items: stretch; align-items: flex-start; align-items: flex-end; align-items: center; align-items: baseline; }



5. align-content - Defines the alignment of flex lines (if there are multiple rows) along the cross axis. Options include stretch (default), flex-start, flex-end, center, space-between, space-around, or space-evenly.



div { align-content: stretch; align-content: flex-start; align-content: flex-end; align-content: center; align-content: space-between; align-content: space-around; align-content: space-evenly; }

Flex Item Properties

All the Flex Item Properties in descriptive manner are mentioned below -

1. flex-grow - Specifies how flex items grow to fill the available space. Higher values grow more. Default is 0.


2. flex-shrink - Specifies how flex items shrink if there is not enough space. Higher values shrink more. Default is 1.


3. flex-basis - It Defines the initial size of a flex item. It can be set in pixels, percentages, or auto.


4. flex - A shorthand property that combines flex-grow, flex-shrink, and flex-basis in one declaration.



div { flex: flex-grow, flex-shrink, flex-basis; }



5. align-self - It is used to Override the align-items property.

Additional Flex Properties

Some other addition Flex properties in CSS Flexbox are mentioned below -

1. order - Specifies the order in which flex items appear within the container. By default, items have an order of 0, and the order is determined based on their source order.


2. flex-flow - A shorthand property that combines flex-direction and flex-wrap in one declaration.