CSS flex Property

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
Media
Visual
Computed value
See individual properties
Animatable
Yes
CSS Version
CSS3
JavaScript syntax
object.style.flex

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

<div class="outer-container">
<div class="box">Box</div>
<div class="box larger">Larger Box</div>
</div>
.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;
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
1112292012.19
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
4.4292012.19X