📖
Flex Elements and flex: 1
flex-grow, flex-shrink, flex-basis and shorthand
Three flex item properties
On the items themselves (not the container) you can set:
css
.item {
flex-grow: 1; /* how much the item can GROW (take free space) */
flex-shrink: 1; /* how much it can SHRINK if space is tight */
flex-basis: 0; /* initial size before distributing free space */
}
/* Shorthand: flex: grow shrink basis */
.item { flex: 1 1 0; }
.item { flex: 1; } /* = flex: 1 1 0 — most common */
.item { flex: none; } /* = flex: 0 0 auto — item doesn't grow or shrink */flex: 1 — the most popular value. All items with flex: 1 take an equal share of free space.
css
💬
flex: 0 0 280px — sidebar is always 280px (doesn't grow or shrink). flex: 1 for content — takes everything left.
Remember: flex: 1 = 'take all available share'. This is the most useful property for flex items. Multiple flex: 1 = equal columns.