flex flex-grow

by Henery Yang

HTML

<div class="flex-container flex-start">
  <div class="flex-item flex-grow-1">
    <p>item 1</p>
    <p>1</p>
  </div>
  <div class="flex-item flex-grow-1">
    <p>item 2</p>
    <p>1</p>
  </div>
  <div class="flex-item flex-grow-1">
    <p>item 3</p>
    <p>1</p>
  </div>
  <div class="flex-item flex-grow-1">
    <p>item 4</p>
    <p>1</p>
  </div>
</div>
<div class="flex-container flex-start">
  <div class="flex-item flex-grow-1">
    <p>item 1</p>
    <p>1</p>
  </div>
  <div class="flex-item flex-grow-1">
    <p>item 2</p>
    <p>1</p>
  </div>
  <div class="flex-item flex-grow-3">
    <p>item 3</p>
    <p>3</p>
  </div>
  <div class="flex-item flex-grow-1">
    <p>item 4</p>
    <p>1</p>
  </div>
</div>

CSS

.flex-container {
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  width: 610px;
  background-color: #FFD54F;
  text-align: center;
  margin-bottom: 10px;
}

.flex-item {
  background-color: #ffffff;
  margin: 5px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26);
}

.flex-grow-1 {
  flex-grow: 1;
}

.flex-grow-3 {
  flex-grow: 3;
}