CSS flex Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The flex property is a shorthand property that allows you to specify the parameters of an element so that it effectively fills the available space. Elements can be stretched proportionally, taking into account the given ratio, or compressed, to completely accommodate all elements without hyphenation in one line. The individual properties are: flex-grow, flex-shrink and flex-basis

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="outer-container">

  <div class="box">Box</div>

  <div class="box larger">Larger Box</div>

</div>

CSS

.outer-container {
  font: 16px sans-serif;
  background: gold;
  color: white;
  height: 200px;
  display: flex;
}
.box {
  padding: 10px;
  flex: 1 0 auto;
}
.larger {
  background: yellowgreen;
  flex: 3 0 auto;
}

Result

Editor