How to use flexbox in css

Flexbox is a layout mode in CSS that allows you to easily create flexible and responsive layouts. It works by defining a container element as a flex container, and its children as flex items. The flex container allows you to control the alignment, direction, and order of the flex items within it.

Here's a basic tutorial on how to use Flexbox:

1. Create a flex container: To create a flex container, you can use the display property with a value of flex or inline-flex on the parent element. This tells the browser to treat the element and its children as a flex container and flex items, respectively.

.container {
  display: flex;
}

2. Set the direction of the flex items: By default, flex items are arranged in a row from left to right. You can use the flex-direction property to change the direction of the flex items. Possible values are row, row-reverse, column, and column-reverse.

.container {
  display: flex;
  flex-direction:column;
}

3. Align the flex items: The justify-content property allows you to align the flex items along the main axis (horizontally for rows, vertically for columns). Possible values are flex-start, flex-end, center, space-between, and space-around.

.container {
  display: flex;
  justify-content: center;
}

4. Align the flex items along the cross axis: The align-items property allows you to align the flex items along the cross axis (vertically for rows, horizontally for columns). Possible values are flex-start, flex-end, center, baseline, and stretch.

.container {
  display: flex;
  align-items: center;
}

5. Adjust the size of the flex items: The flex property allows you to adjust the size of the flex items relative to each other. You can specify a positive number to increase the size of an item, or a negative number to decrease it.

.item1 {
  flex: 2;
}

.item2 {
  flex: 1;
}

These are just a few examples of what you can do with Flexbox. For more detailed information and examples, you can refer to the documentation on the Mozilla Developer Network (MDN) website