Codestin Search App

CSS flex Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The flex property is a shorthand applied to flex items that controls how an item sizes itself and participates in distributing available space inside a flex container. It bundles the behaviors that determine an item's base size, how it expands to fill extra room and how it contracts when space is limited, letting a single declaration express all three concerns. Because it is a per-item setting it only takes effect when the parent is a flex container created with display set to a flex mode.

The real power of flex appears in adaptive, proportional layouts: it operates along the container’s main axis (as determined by flex-direction) and participates in the sharing of free or oversubscribed space among sibling items. The constituent behaviors—linked to the corresponding longhands flex-grow, flex-shrink and flex-basis—establish how much an item contributes to or resists size changes and what its starting size should be before distribution takes place. That proportionality is what makes flex preferable to fixed widths for many responsive UI patterns.

When using flex in a layout, it’s important to coordinate it with alignment and spacing controls: distribution of leftover space along the main axis is typically handled by justify-content, cross-axis alignment by align-items, and consistent gaps between items by gap. You can also change visual sequencing with order without altering the source order. Finally, bear in mind that intrinsic item sizes and other constraints (for example min/max sizing) still influence final results, so flex should be used in combination with those constraints to produce predictable, accessible layouts.

Definition

Initial value: See individual properties
Applies to: Flex items, including in-flow pseudo-elements
Inherited: No
Computed value: See individual properties
Animatable: Yes
JavaScript syntax: object.style.flex

Interactive Demo

flex: 1;

flex: 2;

flex: 1 30px;

flex: 1 1 100px;

Change Flex

flex: 1

Syntax

flex: none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]

Values

noneCorresponds to the value of flex : 0 0 auto;
autoCorresponds to the value of flex : 1 1 auto;
initialSets the property to the default value. Corresponds to the value of flex : 0 1 auto;
inheritIndicates that the value is inherited from the parent element.
flex-basisA number that indicates how much the block will be increased in relation to the rest of the flex elements in the container. Negative values are not allowed. The default value is 0.
flex-shrinkA number that indicates how much the block will be reduced in relation to other flex elements in the container (with a lack of free space). Negative values are not allowed. The default value is 1.
flex-basisDefines the default size for the flex element before allocating space in the container. Negative values are not allowed. The size is indicated in CSS units (px, em, pt, etc.), or is calculated automatically by the browser based on the content of the element. The default value is auto.

Example

HTML

<div class="flex-demo">

  <h2 class="title">Flexbox: flex property example</h2>

  <div class="flex-container">

    <div class="item item-1">Fixed</div>

    <div class="item item-2">Flexible (flex: 1 1 120px)</div>

    <div class="item item-3">Flexible (flex: 2 1 120px)</div>

    <div class="item item-4">Basis 40%</div>

  </div>

</div>

CSS

/* Basic reset */
* {
  box-sizing: border-box;
}

.flex-demo {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.title {
  margin: 0 0 12px 0;
  font-size: 18px;
  color: #222;
}

.flex-container {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: #f6f8fa;
  border: 1px solid #e1e4e8;
  border-radius: 8px;
}

.item {
  background: linear-gradient(135deg, #6fb1fc 0%, #4364f7 100%);
  color: white;
  padding: 12px 16px;
  border-radius: 6px;
  min-width: 60px;
  text-align: center;
  font-weight: 600;
}

/* Examples of different flex settings */
.item-1 {
  flex: 0 0 60px; /* no grow, no shrink, fixed 60px */
}

.item-2 {
  flex: 1 1 120px; /* can grow and shrink, base 120px */
}

.item-3 {
  flex: 2 1 120px; /* grows twice as much as .item-2 */
}

.item-4 {
  flex: 0 1 40%; /* does not grow, can shrink, basis 40% */
  align-self: stretch; /* override align-items */
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS flex property. Hover over a browser icon to see the version that first introduced support for this CSS property.