flex-grow # 03

flex-grow

It works like a bootstrap grid system. The parent element will be divided into 12 columns.

CSS

.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

HTML

<div class="flex-container">
      <div style="flex-grow: 2">1</div>
      <div style="flex-grow: 2">2</div>
      <div style="flex-grow: 8">3</div>
</div>

Previous PostNext Post