SyntaxStudy
Sign Up

flex

property CSS3

Shorthand for flex-grow, flex-shrink, and flex-basis. Controls how a flex item grows and shrinks.

Syntax

flex: grow shrink basis;

Example

css
.sidebar { flex: 0 0 250px; }  /* fixed width */
.main    { flex: 1; }          /* takes remaining space */

/* Equal columns */
.col { flex: 1 1 0; }

/* Common presets */
.auto { flex: auto; }    /* 1 1 auto */
.none { flex: none; }    /* 0 0 auto */