How to Control Ratios of Flex Items Along the Main Axis in CSS?

Flexbox in CSS is a powerful tool for aligning elements in rows or columns. It allows you to easily control the size and distribution of items, making it possible to adjust their relative sizes. For example, you can make one element larger than the others, creating responsive and dynamic layouts with minimal effort.

Below are different approaches to Control Ratios of Flex Items:

Using the flex property

In this approach, we are using flex property that can control the size of our flex items based on ratios. we have used Flexbox to create a responsive layout with three items in a row. The "container" class applies the "flex" display to align the items horizontally. Each item has a different "flex" value, determining how much space they occupy relative to each other. "Item 1" takes up 1 part of the available space, "Item 2" takes up 2 parts, and "Item 3" takes up 3 parts, resulting in proportional sizing based on the specified flex values.

Example: In this example, we have three items. Item 3 will be the largest, Item 2 will be medium-sized, and Item 1 will be the smallest because of their flex values.

Output:

Using the flex-grow Property

If we only want to control how much items grow when there’s extra space, we can use flex-grow. The flex-grow property assigns a proportion to each flex item. This proportion determines how much extra space the item should take up in comparison to others.

Example: In this example, Item 2 will grow more compared to Item 1 and Item 3 when there’s extra space available, making it twice as large.

Output:

Conclusion

Controlling the size ratios of flex items using Flexbox in CSS is a powerful way to create responsive and dynamic web layouts. By adjusting properties like flex and flex-grow, we can easily determine how much space each item should take up, making our layout more flexible and visually appealing.