Property flex

A shorthand property for the flex-grow,
flex-shrink, and the flex-basis properties.

The most common use-case I notice on the web is
flex: 1, which lets a flex item to expand and
fill the available space.

The default value for flex is 0 1 auto. What
that means is that it allow flex items to grow
based on their content size.

.item {
  /* Equivalent to flex: 1 1 auto */
  flex: auto;
}

Flex items absolute sizing

.item {
  /* Equivalent to flex: 1 1 0% */
  flex: 1;
}

Examples

The avatar and the text content should be on
the same line.

<div class="user">
  <img class="user__avatar" src="shadeed.jpg" alt="" />
  <div>
    <h3>Ahmad Shadeed</h3>
    <p>Author of Debugging CSS</p>
  </div>
</div>

.user {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.user__avatar {
  flex: 0 0 70px;
  width: 70px;
  height: 70px;
}

flex has a higher priority than the width
property.

.user__avatar {
  /* The width is 100px, not 70px */
  flex: 0 0 100px;
  width: 70px;
  height: 70px;
}

You have a title for a section header, and it
should fill all the available space. Using
flex: 1 is perfect for that case.

.page-header {
  display: flex;
  flex-wrap: wrap;
}

.page-header__title {
  flex: 1;
}