flex 🚧

1

11

2

10

3

9

4

8

5

7

6

6

12

<div class="flex ... ">
  <div class="flex-1/12 ...">1</div>
  <div class="flex-11/12 ...">11</div>
</div>
<div class="flex ...">
  <div class="flex-2/12 ...">2</div>
  <div class="flex-10/12 ...">10</div>
</div>
<div class="flex ...">
  <div class="flex-3/12 ...">3</div>
  <div class="flex-9/12 ...">9</div>
</div>
<div class="flex ...">
  <div class="flex-4/12 ...">4</div>
  <div class="flex-8/12 ...">8</div>
</div>
<div class="flex ...">
  <div class="flex-5/12 ...">5</div>
  <div class="flex-7/12 ...">8</div>
</div>
<div class="flex ...">
  <div class="flex-6/12 ...">6</div>
  <div class="flex-6/12 ...">6</div>
</div>
<div class="flex ...">
  <div class="flex-12/12 ...">12</div>
</div>

<div class="flex ... ">
  <div class="...">...</div>
  <div class="...">...</div>
</div>

.flex {
  display: flex;
}

these classes is flex basis based

<div class="flex ... ">
  <div class="flex-5/12 ">...</div>
  <div class="flex-3/12">...</div>
</div>

percentage values

.flex {
  display: flex;
}
.flex-3\/12 {
  flex: 0 0 25%;
}
.flex-5\/12 {
  flex: 0 0 41.6666666667%;
}