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

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