Flex_Example_Shrink

by Julien Roche

HTML

<main class="flex">
  <section class="flex_child">Element shrink 0</section>
  <section class="flex_child">Element shrink 1</section>
  <section class="flex_child">Element shrink 1</section>
  <section class="flex_child">Element shrink 2</section>
</main>

CSS

.flex {
  background-color: white;
  display: flex;
  justify-content: space-around;
  overflow: hidden;
  width: 550px;
}

.flex_child {
  border: 1px solid black;
  flex-basis: 220px;
  flex-shrink: 1;
  font-weight: bolder;
  margin: 5px 5px 5px 5px;
  text-align: center;
}

.flex_child:first-child {
  flex-shrink: 0;
}

.flex_child:last-child {
  flex-shrink: 2;
}