Flexbox `dial` positioning system

app\dial.scss

// dial.css
[class^="col-"],
[class*=" col-"] {
    display: flex;
    flex-direction: column;
}

[class^="row-"],
[class*=" row-"] {
    display: flex;
    flex-direction: row;
}

.col-1,
.row-1 {
    justify-content: flex-start;
    align-items: flex-start;
}
.col-2,
.row-2 {
    justify-content: flex-start;
    align-items: center;
}
.col-3,
.row-3 {
    justify-content: flex-start;
    align-items: flex-end;
}
.col-4,
.row-4 {
    justify-content: center;
    align-items: flex-start;
}
.col-5,
.row-5 {
    justify-content: center;
    align-items: center;
}
.col-6,
.row-6 {
    justify-content: center;
    align-items: flex-end;
}
.col-7,
.row-7 {
    justify-content: flex-end;
    align-items: flex-start;
}
.col-8,
.row-8 {
    justify-content: flex-end;
    align-items: center;
}
.col-9,
.row-9 {
    justify-content: flex-end;
    align-items: flex-end;
}

.col-28 {
    justify-content: space-between;
}
.row-46 {
    justify-content: space-between;
}