Deconstructed pancake

This is a common layout for marketing sites, for example, which may have a row of three items, usually with an image, title, and then some text, describing some features of a product. On smaller screens, you'll want those to stack nicely, and expand as you increase the screen size.

By using flexbox for this effect, you won't need media queries to adjust the placement of these elements when the screen resizes.

The flex shorthand stands for: flex: <flex-grow> <flex-shrink> <flex-basis>.

flex-grow Stretching

If you want the boxes to stretch and fill the space as they wrap to the next line, set the value of <flex-grow> to 1, for example:

.parent {
  display: flex;
}

.child {
  flex: 1 1 150px;
}

Now, as you increase or decrease the screen size, these flex items both shrink and grow.

No stretching

If you want your boxes to fill out to their <flex-basis> size, shrink on smaller sizes, but not stretch to fill any additional space, write: flex: 0 1 <flex-basis>. In this case, your <flex-basis> is 150px:

.parent {
  display: flex;
}

.child {
  flex: 0 1 150px;
}

<div class="parent">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

        .parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.box {
  /*  Stretching: */
  flex: 1 1 150px; 
  margin: 5px;
  background: red;
  gap: 1rem;
}