FLEXBOX in css

Flex layout is used to give the container the ability to alter its item's width/height (and order) to best fill the available space. A flex container expands items to fill available free space or shrinks them to prevent overflow, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically based and inline which is horizontally based)

Properties of parent(flex container):

1. Display: This defines a flex container. It enables a flex context for all its direct children.

   .container {
     display: flex; 
   }
   

2. Flex-direction: This establishes the main axis, thus defining the direction flex items are placed in the flex container.

   .container {
     flex-direction: row | row-reverse | column | column-reverse;
   }
   

3. flex-wrap: It wraps the content to make it more responsive while using the page on a different device.

   .container {
     flex-wrap: nowrap | wrap | wrap-reverse;
   }
   

4. Flex-Flow: This is a shorthand for the flex-direction and flex-wrap properties, which together define the flex container’s main and cross axes. The default value is row nowrap.

   .container {
     flex-flow: column wrap;
   }
   

5. justify-content: This defines the alignment along the main axis. It helps distribute extra free space left over. It works horizontally in the container.

   .container {
     justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
   }
   

6. align-items: This defines the default behavior for how flex items are laid out vertically.

   .container {
     align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
   }
   

7. align-content: This aligns a flex container’s lines within when there is extra space in the cross-axis.It only works on multi-line flexible containers, where flex-wrap is set to either (wrap or wrap reverse).

   .container {
     align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
   }
   

8. gap : controls the gap between the flex items but not on the outer edges.

   .container {
     display: flex;
     ...
     gap: 10px;
     gap: 10px 20px; /* row-gap column gap */
     row-gap: 10px;
     column-gap: 20px;
   }
   

Properties of child class

1. order : the order property controls the order in which they appear in a flex container. The default order is the source order.

   .item {
     order: 5; /* default is 0 */
   }
   

2. flex-grow: This defines the ability to grow the element. It tells what amount of the available space inside the flex container the item should take up.

   .item {
     flex-grow: 4; /* default 0 */
   }
   

3. flex-shrink: This defines the ability of a flex item to shrink when needed.

   .item {
     flex-shrink: 3; /* default 1 */
   }
   

4. align-self: This allows the default alignment to be overridden by individual flex items.

   .item {
     align-self: auto | flex-start | flex-end | center | baseline | stretch;
   }