flexbox

by sthag

HTML

<div class="box flex">
  <div class="flex_01auto">
    flex
  </div>
</div>

<div class="box flex">
  <div class="flex_01auto">
    flex
  </div>
  <div class="flex_01auto">
    flex
  </div>
  <div class="flex_1">
    flex
  </div>
</div>

<div class="box flex">
  <div class="flex_1">
    flex_1
  </div>
  <div class="flex_1">
    flex_1
  </div>
</div>

<div class="box flex_wrap">
  <div class="flex_1">
    flex_1
  </div>
  <div class="flex_1">
    flex_1
  </div>
  <div class="flex_1">
    flex_1
  </div>
  <div class="flex_1">
    flex_1
  </div>
</div>

<div class="box flex_wrap">
  <div class="flex_half">
    flex_half
  </div>
  <div class="flex_half">
    flex_half
  </div>
  <div class="flex_half">
    flex_half
  </div>
</div>

<div class="box flex_wrap">
  <div class="flex_1full">
    flex_1full
  </div>
  <div class="flex_third">
    flex_third
  </div>
  <div class="flex_third">
    flex_third
  </div>
  <div class="flex_third">
    flex_third
  </div>
  <div class="flex_third">
    flex_third
  </div>
  <div class="flex_1">
    flex_1
  </div>
 </div>

SCSS

* {
  box-sizing: border-box;
}

.box {
  margin-bottom: 32px;
  padding: 4px;
  background-color: rgba(darkslateblue, .2);
  * {
    padding: 8px;
    border: 1px solid purple;
  }
  & > div {
    background-color: rgba(crimson, .8);
  }
  & > div + div {
    background-color: rgba(crimson, .6);
  }
  & > div + div + div {
    background-color: rgba(crimson, .4);
  }
  & > div + div + div + div {
    background-color: rgba(crimson, .2);
  }
}

.flex {
  display: flex;
}

.flex_wrap {
  display: flex;
  flex-wrap: wrap;
}

.flex_1 {
  flex: 1; /* 1 1 auto - grow shrink basis */
}

.flex_01auto {
  flex: 0 1 auto;
}

.flex_half {
  flex: 0 1 auto;
  width: 50%;
}

.flex_third {
  flex: 0 1 auto;
  width: 33.3%;
  width: calc(100% / 3);
}

.flex_1full {
  flex: 1 1 100%;
}