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

.flex-size-1 { width: calc(100% / 12 * 1); padding: .5rem; }
.flex-size-2 { width: calc(100% / 12 * 2); padding: .5rem; }
.flex-size-3 { width: calc(100% / 12 * 3); padding: .5rem; }
.flex-size-4 { width: calc(100% / 12 * 4); padding: .5rem; }
.flex-size-5 { width: calc(100% / 12 * 5); padding: .5rem; }
.flex-size-6 { width: calc(100% / 12 * 6); padding: .5rem; }
.flex-size-7 { width: calc(100% / 12 * 7); padding: .5rem; }
.flex-size-8 { width: calc(100% / 12 * 8); padding: .5rem; }
.flex-size-9 { width: calc(100% / 12 * 9); padding: .5rem; }
.flex-size-10 { width: calc(100% / 12 * 10); padding: .5rem; }
.flex-size-11 { width: calc(100% / 12 * 11); padding: .5rem; }
.flex-size-12 { width: calc(100% / 12 * 12); padding: .5rem; }

.flex-align-start { align-items: flex-start; }
.flex-align-center { align-items: center; }
.flex-align-end { align-items: flex-end; }

.flex-justify-start { justify-content: flex-start; }
.flex-justify-center { justify-content: center; }
.flex-justify-end { justify-content: flex-end; }

.flex-justify-around { justify-content: space-around; }
.flex-justify-between { justify-content: space-between; }