Columns

Hidden less than 1366: fx-hidden-1366

fx-col-12
fx-col-11
fx-col-10
fx-col-9
fx-col-8
fx-col-7
fx-col-6
fx-col-5
fx-col-4
fx-col-3
fx-col-2
fx-col-1

Columns

Showed less than 1366: fx-hidden-gt-1366

fx-col-12
fx-col-11
fx-col-10

Adaptive less than breakpoint

COL1 (fx-col-6 fx-col-12-1280 fx-col-12-1024)
COL2 (fx-col-3 fx-col-6-1280 fx-col-12-1024)
COL3 (fx-col-3 fx-col-6-1280 fx-col-12-1024)

Adaptive more than breakpoint

COL1 (fx-col-12 fx-col-12-gt-1024 fx-col-6-gt-1280)
COL2 (fx-col-12 fx-col-6-gt-1024 fx-col-3-gt-1280)
COL3 (fx-col-12 fx-col-6-gt-1024 fx-col-3-gt-1280)

justify-content: flex-start (<div class="fx-row fx-start">...</div>) default

COL1 (fx-col-3)
COL2 (fx-col-3)
COL3 (fx-col-3)

justify-content: flex-end (<div class="fx-row fx-end">...</div>)

COL1 (fx-col-3)
COL2 (fx-col-3)
COL3 (fx-col-3)

justify-content: center (<div class="fx-row fx-center">...</div>)

COL1 (fx-col-3)
COL2 (fx-col-3)
COL3 (fx-col-3)

justify-content: space-between (<div class="fx-row fx-sp-between">...</div>)

COL1 (fx-col-3)
COL2 (fx-col-3)
COL3 (fx-col-3)

justify-content: space-around (<div class="fx-row fx-sp-around">...</div>)

COL1 (fx-col-3)
COL2 (fx-col-3)
COL3 (fx-col-3)

align-items: stretch (<div class="fx-row fx-ai-stretch">...</div>) default

COL1 (fx-col-3)
COL2 (fx-col-3)
COL3 (fx-col-3)

align-items: center (<div class="fx-row fx-ai-center">...</div>)

COL1 (fx-col-3)
COL2 (fx-col-3)
COL3 (fx-col-3)

align-items: start (<div class="fx-row fx-ai-start">...</div>)

COL1 (fx-col-3)
COL2 (fx-col-3)
COL3 (fx-col-3)

align-items: end (<div class="fx-row fx-ai-end">...</div>)

COL1 (fx-col-3)
COL2 (fx-col-3)
COL3 (fx-col-3)

align-items: baseline (<div class="fx-row fx-ai-base">...</div>)

COL1 (fx-col-3)
COL2 (fx-col-3)
COL3 (fx-col-3)

align-items: initial (<div class="fx-row fx-ai-initial">...</div>) default

COL1 (fx-col-3)
COL2 (fx-col-3)
COL3 (fx-col-3)

align-items: inherit (<div class="fx-row fx-ai-inherit">...</div>)

COL1 (fx-col-3)
COL2 (fx-col-3)
COL3 (fx-col-3)

flex-direction: row (<div class="fx-row fx-dir-row">...</div>) default

COL1 (fx-col-3)
COL2 (fx-col-3)
COL3 (fx-col-3)

flex-direction: row-reverse (<div class="fx-row fx-dir-row-rev">...</div>)

COL1 (fx-col-3)
COL2 (fx-col-3)
COL3 (fx-col-3)

flex-direction: column (<div class="fx-row fx-dir-col">...</div>)

COL1 (fx-col-3)
COL2 (fx-col-3)
COL3 (fx-col-3)

flex-direction: column-reverse (<div class="fx-row fx-dir-col-rev">...</div>)

COL1 (fx-col-3)
COL2 (fx-col-3)
COL3 (fx-col-3)

flex-direction: initial (<div class="fx-row fx-dir-initial">...</div>) default

COL1 (fx-col-3)
COL2 (fx-col-3)
COL3 (fx-col-3)

flex-direction: inherit (<div class="fx-row fx-dir-inherit">...</div>)

COL1 (fx-col-3)
COL2 (fx-col-3)
COL3 (fx-col-3)