What is Flexbox?

Flexbox is a one-dimensional layout system that we can use to create a row or a column axis layout. It makes our life easier to design and build responsive web pages without having to use tricky hacks and a lot of float and position properties in our CSS code. The key concept of flexbox is the flex container and the flex items. To create a flex container, you use the display: flex property on the container element. This turns the container into a flex container and makes its child elements into flex items.

Flexbox-Properties:

1. flex-direction

2. justify-content

3. align-items

4. flex-wrap

5. flex-grow

6. flex-shrink

   1) Flex-direction:

   The flex-direction property sets the direction of the main axis in a flex container. There are four possible values:

   1. row: The main axis runs from left to right.

   2. row-reverse: The main axis runs from right to left.

   3. column: The main axis runs from top to bottom.

   4. column-reverse: The main axis runs from bottom to top.

Here is an example of how each of these values affects the layout of flex items:

.container {
  display: flex;
  flex-direction: row; /* default */
}
.container {
  display: flex;
  flex-direction: row-reverse;
}
.container {
  display: flex;
  flex-direction: column;
}
.container {
  display: flex;
  flex-direction: column-reverse;
}

2) justify-content:

The justify-content property is used to align flex items along the main axis of a flex container. There are five possible values:

1. flex-start: The items are aligned to the start of the main axis.

2. flex-end: The items are aligned to the end of the main axis.

3. center: The items are centered along the main axis.

4. space-between: The items are evenly distributed along the main axis, with the first item at the start of the main axis and the last item at the end of the main axis.

5. space-around: The items are evenly distributed along the main axis, with equal space between them.

Here is an example of how each of these values affects the layout of flex items:

.container {
  display: flex;
  justify-content: flex-start; /* default */
}
.container {
  display: flex;
  justify-content: flex-end; 
}
.container-center {
  display: flex;
  justify-content: center;
}
.container-space-between {
  display: flex;
  justify-content: space-between;
}
.container-space-around {
  display: flex;
  justify-content: space-around;
}

3) align-items:

1. align-items have five possible value:

   1. flex-start: Items aligned to the top of the container

   2.flex-end: Items aligned to the bottom of the container

   3.center: Items aligned to the vertical center of the container

   4.stretch: Items are stretched to fit the container

   5.baseline: items are aligned at the baseline of the container

   By using these align-items properties, you can easily align the flex items in the cross-axis of a flex container. This allows you to create complex layouts with precise alignment, ensuring that your design looks great on any device or screen size.

   Here is an example of how each of these values affects the layout of flex items:

.container {
  display: flex;
  align-items: flex-start;
}
.container {
  display: flex;
  align-items: flex-end;
}
.container {
  display: flex;
  align-items: center;
}
.container {
  display: flex;
  align-items: stretch;
}
.container {
  display: flex;
  align-items: baseline;
}

4) flex-wrap:

1. 1. flex-wrap: spreads the items inside the container. It accepts the following values.

   2.nowrap: This is the default value and specifies that the flex items should not wrap.

   3.wrap: This value specifies that the flex items should wrap onto multiple lines.

   4.wrap- reverse: This value specifies that the flex items should wrap onto multiple lines in reverse order.

   Here is an example of how each of these values affects the layout of flex items:

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

5) flex-grow :

1. This property is used to control how much the flex items can grow relative to one another to fill available space in the flex container.

   1. <number> : property takes a unitless number as its value, which represents the proportion of the available space that the item should take up.

   2.inherit: property can also inherit its value from its parent element, using the inherit keyword. This means that the item will have the same flex-grow value as its parent.

   3.initial : The flex-grow property can also be set to its default value of 0 using the initial keyword.

   4.unset : property can also be set to its inherited value, or to its default value of 0, using the unset keyword.

    /*flex-grow:<number>*/
    .item {
      flex-grow: 1;
    }
    /*flex-grow: inherit*/
    .parent {
      flex-grow: 1;
    }
    .child {
      flex-grow: inherit;
    }
   
    /*flex-grow: initial*/
    .item {
      flex-grow: initial;
    }
    /*flex-grow: unset*/
    .item {
      flex-grow: unset;
    }
   

   6) flex-shrink:

   The flex-shrink property is used to control how much the flex items should shrink relative to each other when there is not enough space in the flex container. It accepts a unitless value that determines the ratio of the item's size to the remaining space.

   1. <number> : This property sets the flex item's ability to shrink. The default value is 1, which means the item will shrink if necessary.

   2.inherit : This property sets the flex item's ability to shrink to be the same as its parent.

   3.initial : This property sets the flex item's ability to shrink to its default value, which is 1.

   4.unset : This property sets the flex item's ability to shrink to be the same as its parent, or to its default value if it has no parent.

   Here is an example of how each of these values affects the layout of flex items:

    /*flex-shrink: <number> */
    .item {
      flex-shrink: 0; /* The item will not shrink */
    }
   
    /*flex-shrink: inherit */
    .item {
      flex-shrink: inherit;
    }
   
    /*flex-shrink: initial */
    .item {
      flex-shrink: initial;
    }
   
    /*flex-shrink: unset*/
    .item {
      flex-shrink: unset;
    }
   

   Thanks for reading!

   If you found this article helpful, please like and share it, Thank you😊

   You can connect with me on Linkedin.