CSS flex

The CSS flex property is a powerful tool for creating flexible layouts in CSS. It allows you to align and distribute elements within a container, regardless of their size. The flex property works by defining how much space each item should take up within the container. This can be useful for creating responsive and dynamic layouts that adjust based on the available space.

To use the flex property, you first need to create a flex container. This can be done by setting the display property of the container to flex. Once the container is set to flex, you can then use the flex property on the child items to control their size and alignment.

There are several properties that can be used with the flex property, including flex-grow, flex-shrink, and flex-basis. These properties allow you to control how the items grow and shrink within the container.

Result:

Item 1

Item 2

Item 3

In the example above, we have a flex container with three child items. The first and third items have a flex value of 1, while the second item has a flex value of 2. This means that the second item will take up twice as much space as the other items within the container.

By changing the flex values of the child items, you can easily adjust the layout to meet your specific needs. The flex property is a versatile tool that can be used to create a wide range of layouts in CSS.