CSS flex - shorthand for flex-grow, flex-shrink and flex-basis

CSS flex – shorthand for flex-grow, flex-shrink and flex-basis

on Sep 10, 2016

CSS flex is the shorthand property for flex-grow, flex-shrink and flex-basis. flex-shrink and flex-basis are optional. Its default value is 1 0 auto.

Syntax:

.someflexcontainer {
  display: flex;
}
.flexitem {
  flex: 0 1 20%;
}

CSS property flex

CSS version:	CSS 3
Value:	[flex-grow] [flex-shrink-optional] [flex-basis-optional]
Initial:	1 0 auto
Applies to:	flex items
Inherited:	no

Example – flex

In the following code, CSS property flex can be changed to the following values

0 1 20%
1 1 20%

<style>
.fbox {
  display: flex;
  width: 250px; background-color:gray;
}
.child {
  background-color:green;
  padding: 3px; margin: 3px;
  /* flex-grow, flex-shrink, flex-basis */
  flex: 0 1 20%;
}
</style>

<div class=fbox>
<div class="child">div1</div>
<div class="child">div2 long</div>
<div class="child">div3</div>
</div>

flex refresh

try it online