Controlling Flex Items' Behavior
When you need precise control over how your flex items behave inside a container, three properties are essential: flex-grow, flex-shrink, and flex-basis. Each property handles a different aspect of an item's size and flexibility.
flex-growdetermines how much a flex item will expand to fill extra space;flex-shrinkdecides how much it will shrink when there is not enough space;flex-basissets the initial main size of the item before growing or shrinking happens.
These properties interact to create powerful, responsive layouts.
index.html
In the example above, both items start with a flex-basis of 80px, but they have different flex-grow values. The container is 400px wide, so after the initial sizes and margins are accounted for, there is extra space to distribute. The first item has flex-grow: 2, while the second has flex-grow: 1. This means the available space is split into three parts: the first item gets two parts, and the second gets one. As a result, the first item becomes twice as wide as the second, showing how flex-grow lets you control the proportion of space each item receives when the container has extra room.
index.html
This second example demonstrates how flex-shrink works. Both items are set to width: 200px, but the container is only 300px wide, so there is not enough space. The first item has flex-shrink: 2, and the second has flex-shrink: 1. This means the first item will shrink twice as much as the second to fit into the container. As a result, the first item becomes noticeably smaller than the second, showing how flex-shrink controls how items reduce their size when space is tight.
index.html
In this final example, you can see the effect of flex-basis. The first item starts at 120px wide, and the second at 60px, regardless of their content. This property sets the starting size for each item before any growing or shrinking occurs, giving you control over the initial layout. By adjusting flex-basis, you can decide how much space each item should take up by default, making it a key part of building flexible and predictable flexbox layouts.
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Awesome!
Completion rate improved to 7.69Controlling Flex Items' Behavior
Desliza para mostrar el menú
When you need precise control over how your flex items behave inside a container, three properties are essential: flex-grow, flex-shrink, and flex-basis. Each property handles a different aspect of an item's size and flexibility.
flex-growdetermines how much a flex item will expand to fill extra space;flex-shrinkdecides how much it will shrink when there is not enough space;flex-basissets the initial main size of the item before growing or shrinking happens.
These properties interact to create powerful, responsive layouts.
index.html
In the example above, both items start with a flex-basis of 80px, but they have different flex-grow values. The container is 400px wide, so after the initial sizes and margins are accounted for, there is extra space to distribute. The first item has flex-grow: 2, while the second has flex-grow: 1. This means the available space is split into three parts: the first item gets two parts, and the second gets one. As a result, the first item becomes twice as wide as the second, showing how flex-grow lets you control the proportion of space each item receives when the container has extra room.
index.html
This second example demonstrates how flex-shrink works. Both items are set to width: 200px, but the container is only 300px wide, so there is not enough space. The first item has flex-shrink: 2, and the second has flex-shrink: 1. This means the first item will shrink twice as much as the second to fit into the container. As a result, the first item becomes noticeably smaller than the second, showing how flex-shrink controls how items reduce their size when space is tight.
index.html
In this final example, you can see the effect of flex-basis. The first item starts at 120px wide, and the second at 60px, regardless of their content. This property sets the starting size for each item before any growing or shrinking occurs, giving you control over the initial layout. By adjusting flex-basis, you can decide how much space each item should take up by default, making it a key part of building flexible and predictable flexbox layouts.
¡Gracias por tus comentarios!
