Flexbox

Flex (Flex Grow, Flex Shrink, and Flex Basis)

flex: [flex-grow flex-shrink flex-basis];

Examples

flex: 0 1 auto/flex: initial;
/* default - Do not grow, can shrink, make size of content */
flex: 1 0 200px;
/* Grow element, do not shrink, make it 200px (min width) */
flex: 0 1 200px;
/* Do not grow element, can shrink, make it 200px (max width) */
flex: 1 0 auto;
/* Grow element, do not shrink, make size of content */

flex-grow

Tells our element whether or not it can take up additional space. A flex-grow value of 1 or larger tells our element to grow to take up the available space. An element with a flex-grow value set to 0 will not grow to take up available space.

/* 33.3% */
.one { flex-grow: 1; }
/* 66.6% */
.two { flex-grow: 2; }

flex-shrink

The opposite of flex grow, how much an elment will shrink in the space.

An element with a flex-shrink value of 0 will not shrink as our page gets smaller. This is only true if there is no flex-grow value on this element. If there is a flex-grow value, the element won’t shrink smaller than it’s content.

An element with a flex shrink value of 1 will shrink, but not smaller than it’s content.

Distribute space

<div class="flex">
  <div class="col a"></div>
  <div class="col a"></div>
  <div class="col b"></div>
</div>

.flex {
  display: flex;
}

.flex .col {
  background: purple;
  flex: 1 1 0;
  height: 50px;
  margin: 5px;
}

.flex .col:first-child {
  margin-left: 0;
}

.flex .col:last-child {
  margin-right: 0;
}

Prevent flex items from stretching

.flex {
  align-items: flex-start;
  display: flex;
}

/* OR */

.flex {
  align-self: start;
}