Flex Grid

Columns keep filling space evenly

.col

Fixed size columns and evenly filled remainder

.col-1 through .col-100

.col-50

.col

.col-50

.col-30

Setting Row to center and free

.col-50

.col-free

Horizontal Column Alignments

On Row (center)

You apply these classes to the row element and it affects each column.

Note that the cols have to be .col-free, otherwise they fill the space negating these effects

.center, .start, .end, .space-between, .space-around

.col-free

.col-20

.col-free

On Row (space-between)

.col-free

.col-20

.col-free

Vertical Column Alignments

On Row (v-center)

You apply these classes to the row element and it affects each column.

.v-center, .v-start, .v-end, .v-stretch, .v-baseline

.col

On Row when wrap is enabled (v-space-around)

You apply these classes to the row element and it affects each column.

.v-center, .v-start, .v-end, .v-stretch, .v-space-between, .v-space-around

.col-40

On Individual Columns

You apply these classes to the col's

.start

.center

.end

.stretch

.baseline

Row As Column

.row .column Note: May Need a Fixed height if using .col-1 through .col-100

.col

Reverse

.reverse Reverses direction of cols

.col (1)

.col (2)

.col (3)

Column Reverse

.col (1)

.col (2)

.col (3)

Col Ordering

.col-order-1 through .col-order-100

.col .col-order-2 (1)

.col .col-order-1 (2)

.col .col-order-4 (3)

.col .col-order-3 (4)

.col .col-order-6 (5)

.col .col-order-5 (6)

Col Offset

.offset-1 through .offset-100

.col-25 .offset-25

.col-23 .offset-25