December 24, 2022

How to use flexbox in css

Aditya Rawas
Aditya Rawas@rawas_aditya
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;
}
FLEX 1
FLEX 2

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