A simple tutorial about CSS flex property

CSS Flexbox is a layout module that makes it easier to create flexible and responsive layouts in CSS. It provides a simple and powerful way to align elements within a container and distribute space between them.

To use flexbox, you need to set the display property of an element to "flex". You can do this by adding the following rule to your CSS:

.container {
  display: flex;
}

The flex container will now have two main axes: the main axis and the cross axis. By default, the main axis runs horizontally and the cross axis runs vertically. You can change this by setting the flex-direction property:

.container {
  display: flex;
  flex-direction: row;  /* main axis is horizontal, cross axis is vertical */
}

.container {
  display: flex;
  flex-direction: column;  /* main axis is vertical, cross axis is horizontal */
}

You can control how the flex items are aligned along the main axis using the justify-content property. The possible values are:

• flex-start: aligns items to the start of the main axis
• flex-end: aligns items to the end of the main axis
• center: aligns items to the center of the main axis
• space-between: distributes items evenly along the main axis, with the first and last items aligned to the start and end, respectively
• space-around: distributes items evenly along the main axis, with equal space around each item

.container {
  display: flex;
  justify-content: flex-start;  /* align items to the start of the main axis */
}

It's important to note that the justify-content property only works when there is free space in the container. If the container is smaller than the total width of the flex items, the flex items will overflow the container. In this case, you can use the overflow property to control how the overflow is handled.

You can control how the flex items are aligned along the cross axis using the align-items property. The possible values are:

• flex-start: aligns items to the start of the cross axis
• flex-end: aligns items to the end of the cross axis
• center: aligns items to the center of the cross axis
• stretch: stretches items to fill the entire cross axis
• baseline: aligns items along their baselines

.container {
  display: flex;
  align-items: flex-start;  /* align items to the start of the cross axis */
}

Note the same overflow constraint described for justify-content applies to align-items as well. i.e, If the container is smaller than the total height of the flex items, the flex items will overflow the container.

You can also control how individual flex items are aligned along the main and cross axes using the align-self property. This property works the same way as align-items, but it only applies to a single flex item.

.item {
  align-self: flex-end;  /* align this item to the end of the cross axis */
}

Finally, you can use the flex property to control the size and proportion of flex items. The flex property is a shorthand for the flex-grow, flex-shrink, and flex-basis properties.

Here is a brief explanation of each of these properties:

• flex-grow: determines how much a flex item will grow relative to the other flex items when there is free space in the container. The higher the value, the more the item will grow. A value of 0 means the item will not grow at all.
  

  .item {
    flex-grow: 2;  /* this item will grow twice as much as other flex items */
  }
  ​

• flex-shrink: determines how much a flex item will shrink relative to the other flex items when there is not enough space in the container. The higher the value, the more the item will shrink. A value of 0 means the item will not shrink at all.
  

  .item {
    flex-shrink: 0.5;  /* this item will shrink half as much as other flex items */
  }
  ​

• flex-basis: determines the initial size of a flex item before any growing or shrinking occurs. It can be specified in pixels, percentages, or as a keyword (e.g. "auto").
  

  .item {
    flex-basis: 50%;  /* this item will have an initial width of 50% of the container */
  }
  ​

You can use the flex property to set the values of flex-grow, flex-shrink, and flex-basis at the same time. The syntax is as follows:

.item {
  flex: [flex-grow] [flex-shrink] [flex-basis];
}

For example:

.item {
  flex: 2 1 50%;  /* this item will grow twice as much as other items, shrink at the same rate, and have an initial width of 50% of the container */
}

I hope this tutorial has been helpful! Let me know if you have any questions or need further clarification.