Controlling Items: Flexbox Properties for Flexible Elements
Explore the key properties that control the individual behavior of items within a Flexbox container: 'flex-grow', 'flex-shrink', and 'flex-basis'. Master them to create truly responsive layouts.
Welcome! Let's dive into the properties that control individual flex items: flex-grow, flex-shrink, and flex-basis.
Expanding Items with 'flex-grow'
The flex-grow property defines an item's ability to expand and take up available space. A value of 1 means it will grow, while 0 prevents it. If multiple items have flex-grow: 1, they share the extra space equally.
Contracting Items with 'flex-shrink'
flex-shrink is the opposite of grow. It dictates an item's ability to shrink if there isn't enough space in the container. The default value is 1, meaning items are allowed to shrink. A value of 0 prevents shrinking.
Setting Initial Size with 'flex-basis'
flex-basis sets the ideal or initial size of a flex item before any growing or shrinking occurs. It can be a length (e.g., 150px, 10rem) or auto, which respects the item's width or height property.
The 'flex' Shorthand
The flex shorthand property combines flex-grow, flex-shrink, and flex-basis in that order. For example, flex: 1 1 100px; is a common way to create a flexible item that can both grow and shrink from a base size of 100px.
Practice Zone
Interactive Test 1: Drag & Drop
Arrastra en el orden correspondiente.
Arrastra las opciones:
Completa el código:
Interactive Test 2: Fill in the Blanks
Rellena los huecos en cada casilla.
.item { flex-grow: ; flex-shrink: ; flex-basis: ; }
Practice Example: Code Editor
Make the middle item (`.item-2`) expand to fill the available space, while the other two items retain their default size.
Flexbox Properties
| Property | Description |
|---|---|
| flex-grow | Defines how much a flex item will grow relative to the rest of the flex items. |
| flex-shrink | Defines how much a flex item will shrink relative to the rest of the flex items. |
| flex-basis | Defines the initial size of a flex item before extra space is distributed. |
* Write your CSS code and apply it to see the results.
Results:
Flexbox Glossary
- Flex Container
- The parent element that has `display: flex;` applied to it. It establishes the flexbox layout context for its direct children.
- Flex Item
- Any direct child of a flex container. These are the elements that are arranged by the flexbox properties.
- Main Axis
- The primary axis along which flex items are laid out. It is controlled by the `flex-direction` property and can be horizontal (row) or vertical (column).
- Cross Axis
- The axis perpendicular to the main axis. If the main axis is horizontal, the cross axis is vertical, and vice versa.
Flexbox in Action: Real-World Layouts
Flexbox properties are the building blocks of modern responsive layouts. Let's see how `flex-grow`, `shrink`, and `basis` work together in common web components.
1. The Classic Nav Bar
A common pattern is a navigation bar with a logo on the left, links in the middle, and actions on the right. We give the links container flex-grow: 1; to push everything else to the sides.
.nav-links {
flex-grow: 1;
text-align: center;
}2. Responsive Card Grid
For a grid of cards, we can use flex: 1 1 250px;. This tells each card: try to be 250px wide (`basis`), but feel free to grow (`grow: 1`) or shrink (`shrink: 1`) to fit the container. Combined with `flex-wrap`, this creates a perfect responsive grid.
.card {
flex: 1 1 250px;
}3. Preventing Shrinking
Sometimes you have an element, like an icon or avatar, that should never shrink. By setting flex-shrink: 0;, you guarantee it will always maintain its original size, even if the container is cramped.
.avatar {
flex-shrink: 0;
}4. Creating Space Between Items
To push an item or group of items to the end of a container, a powerful trick is to use an auto margin. Setting margin-left: auto; on a flex item will make it take up all available space on its left, pushing it to the far right.
.push-right {
margin-left: auto;
}Practical Takeaway: Think of `flex-basis` as the "suggested size" and `flex-grow`/`flex-shrink` as the "rules for negotiation" when space is abundant or scarce. Mastering this trio is key to fluid web design.