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
11	12	29	20	12.1	9
Tablets / Mobile
4.4	29	20	12.1	9	2.0

Last updated by CSSPortal on: 4th November 2019