CSS flex Property

What You’ll Learn

The flex property is a shorthand that controls how flex items grow, shrink, and size themselves inside a flex container. It is one of the most important tools in modern CSS layout.

Introduction

The flex property in CSS is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties. It is used to define how a flex item will grow or shrink to fit the space available in its flex container.

This property is a key component of the Flexbox layout model, which is designed to provide a more efficient way to lay out, align, and distribute space among items in a container.

Definition and Usage

Apply flex on direct children of a flex container (an element with display: flex or display: inline-flex). Use it to create equal-width columns, proportional layouts, fixed sidebars, and flexible content areas that adapt to screen size.

📝 Syntax

The syntax for the flex property is:

element {
  flex: flex-grow flex-shrink flex-basis;
}

Each value can be specified as follows:

• flex-grow — A number specifying how much the item will grow relative to the rest of the flex items.
• flex-shrink — A number specifying how much the item will shrink relative to the rest of the flex items.
• flex-basis — The initial main size of the flex item, which can be a length (e.g., 20%, 5em, 30px) or the keyword auto.

Basic Example

.item {
  flex: 1;
}

Default Value

The default value of the flex property is 0 1 auto, which means:

• flex-grow: 0 (the item will not grow).
• flex-shrink: 1 (the item will shrink if necessary).
• flex-basis: auto (the item will use its natural size).

Syntax Rules

• Only works on direct children of a flex container.
• One value like flex: 1 sets flex-grow; shrink defaults to 1 and basis to 0%.
• Two values: flex: 1 200px means grow/shrink and basis.
• Common keywords: auto (= 1 1 auto) and none (= 0 0 auto).
• The property is not inherited; set it on each flex item you want to control.

💎 Property Values

The flex shorthand expands into three longhand properties:

Common Shorthand Patterns

flex vs display: flex

Examples Gallery

In this example, we’ll create a simple flex container with three items and use the flex property to control their growth — plus equal columns, a fixed sidebar, and a navbar layout.

<style>
  .container {
    display: flex;
  }
  .item1 { flex: 1; background: lightcoral; }
  .item2 { flex: 2; background: lightblue; }
  .item3 { flex: 1; background: lightgreen; }
</style>

<div class="container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>

.column {
  flex: 1;
}

.sidebar {
  flex: 0 0 200px;
}

.main {
  flex: 1;
}

.logo {
  flex: none;
}

.nav-links {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}

♿ Accessibility

• Maintain logical DOM order — flex changes visual order with CSS, but screen readers follow source order unless you use order carefully.
• Do not shrink text below readable sizes — very small flex-basis values can squeeze content on mobile.
• Test keyboard focus — reordered flex items should still receive focus in a sensible sequence.
• Use semantic landmarks — wrap nav regions in <nav> and main content in <main>.
• Allow wrapping on small screens — pair with flex-wrap: wrap on the container when needed.

💡 Best Practices