Foundations

Flexbox

These utility classes are used to create a flexbox layout. Flexbox is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces.

All flexbox utilities support responsive prefixes.

Display Flex

.nys-display-flex

.nys-flex-column

<div class="nys-display-flex">
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
</div>
<div class="nys-display-flex nys-flex-column">
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
</div>

Flex Grid Rows

.nys-flex-1

.nys-flex-2

.nys-flex-3

.nys-flex-4

.nys-flex-5

.nys-flex-6

.nys-flex-7

.nys-flex-8

.nys-flex-9

.nys-flex-10

.nys-flex-11

.nys-flex-12

.nys-flex-auto

.nys-flex-fill

<div class="nys-grid-row">
  <div class="nys-grid-col nys-flex-1"></div>
  <div class="nys-grid-col nys-flex-1"></div>
  <div class="nys-grid-col nys-flex-1"></div>
  <div class="nys-grid-col nys-flex-1"></div>
</div>
<div class="nys-grid-row">
  <div class="nys-grid-col nys-flex-2"></div>
  <div class="nys-grid-col nys-flex-1"></div>
  <div class="nys-grid-col nys-flex-1"></div>
  <div class="nys-grid-col nys-flex-1"></div>
</div>
<div class="nys-grid-row">
  <div class="nys-grid-col nys-flex-3"></div>
  ...
</div>
<div class="nys-grid-row">
  <div class="nys-grid-col nys-flex-4"></div>
  ...
</div>
<div class="nys-grid-row">
  <div class="nys-grid-col nys-flex-5"></div>
  ...
</div>
<div class="nys-grid-row">
  <div class="nys-grid-col nys-flex-6"></div>
  ...
</div>
<div class="nys-grid-row">
  <div class="nys-grid-col nys-flex-7"></div>
  ...
</div>
<div class="nys-grid-row">
  <div class="nys-grid-col nys-flex-8"></div>
  ...
</div>
<div class="nys-grid-row">
  <div class="nys-grid-col nys-flex-9"></div>
  ...
</div>
<div class="nys-grid-row">
  <div class="nys-grid-col nys-flex-10"></div>
  ...
</div>
<div class="nys-grid-row">
  <div class="nys-grid-col nys-flex-11"></div>
  ...
</div>
<div class="nys-grid-row">
  <div class="nys-grid-col nys-flex-12"></div>
  ...
</div>
<div class="nys-grid-row">
  <div class="nys-grid-col nys-flex-auto"></div>
  ...
</div>
<div class="nys-grid-row">
  <div class="nys-grid-col nys-flex-fill"></div>
  ...
</div>

Flex-direction

.nys-flex-column

.nys-flex-row

<div class="nys-grid-row nys-flex-column">
  <div class="nys-grid-col"></div>
  <div class="nys-grid-col"></div>
  <div class="nys-grid-col"></div>
  <div class="nys-grid-col"></div>
</div>
<div class="nys-grid-row nys-flex-row">
  <div class="nys-grid-col"></div>
  <div class="nys-grid-col"></div>
  <div class="nys-grid-col"></div>
  <div class="nys-grid-col"></div>
</div>

Flex-wrap

.nys-flex-wrap

.nys-grid-col-4

.nys-flex-no-wrap

.nys-grid-col-4

<div class="nys-grid-row nys-flex-wrap">
  <div class="nys-grid-col-4"></div>
  <div class="nys-grid-col-4"></div>
  <div class="nys-grid-col-4"></div>
  <div class="nys-grid-col-4"></div>
</div>
<div class="nys-grid-row nys-flex-no-wrap">
  <div class="nys-grid-col-4"></div>
  <div class="nys-grid-col-4"></div>
  <div class="nys-grid-col-4"></div>
  <div class="nys-grid-col-4"></div>
</div>

Flex-align

.nys-flex-column

.nys-flex-align-start

.nys-flex-align-center

.nys-flex-align-end

.nys-flex-align-stretch

.nys-flex-row

.nys-flex-align-start

.nys-flex-align-center

.nys-flex-align-end

.nys-flex-align-stretch

<div class="nys-display-flex nys-flex-column nys-flex-align-start">
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
</div>
<div class="nys-display-flex nys-flex-column nys-flex-align-center">
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
</div>
<div class="nys-display-flex nys-flex-column nys-flex-align-end">
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
</div>
<div class="nys-display-flex nys-flex-column nys-flex-align-stretch">
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
</div>
<div class="nys-display-flex nys-flex-row nys-flex-align-start">
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
</div>
<div class="nys-display-flex nys-flex-row nys-flex-align-center">
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
</div>
<div class="nys-display-flex nys-flex-row nys-flex-align-end">
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
</div>
<div class="nys-display-flex nys-flex-row nys-flex-align-stretch">
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
</div>

Flex-align-self

.nys-flex-column

.nys-flex-align-self-start

.nys-flex-align-self-center

.nys-flex-align-self-end

.nys-flex-align-self-stretch

.nys-flex-row

.nys-flex-align-self-start

.nys-flex-align-self-center

.nys-flex-align-self-end

.nys-flex-align-self-stretch

<div class="nys-display-flex nys-flex-column">
  <div class="nys-flex-align-self-start"></div>
  <div class="nys-flex-align-self-center"></div>
  <div class="nys-flex-align-self-end"></div>
  <div class="nys-flex-align-self-stretch"></div>
</div>
<div class="nys-display-flex nys-flex-row">
  <div class="nys-flex-align-self-start"></div>
  <div class="nys-flex-align-self-center"></div>
  <div class="nys-flex-align-self-end"></div>
  <div class="nys-flex-align-self-stretch"></div>
</div>

Flex-justify

.nys-flex-row

.nys-flex-justify

.nys-flex-justify-start

.nys-flex-justify-center

.nys-flex-justify-end

<div class="nys-display-flex nys-flex-column nys-flex-justify">
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
</div>
<div class="nys-display-flex nys-flex-column nys-flex-justify-start">
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
</div>
<div class="nys-display-flex nys-flex-column nys-flex-justify-center">
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
</div>
<div class="nys-display-flex nys-flex-column nys-flex-justify-end">
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
</div>
<div class="nys-display-flex nys-flex-row nys-flex-justify">
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
</div>
<div class="nys-display-flex nys-flex-row nys-flex-justify-start">
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
</div>
<div class="nys-display-flex nys-flex-row nys-flex-justify-center">
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
</div>
<div class="nys-display-flex nys-flex-row nys-flex-justify-end">
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
</div>

Order

Order utilities change the visual order of flex items without changing the DOM order. Use .nys-order-first to move an item to the beginning, .nys-order-last to the end, or .nys-order-0 through .nys-order-11 for specific positions.

Class CSS value .nys-order-first order: -1 .nys-order-last order: 999 .nys-order-initial order: 0 .nys-order-0 – .nys-order-11 order: 0 – order: 11

All order utilities support responsive prefixes (e.g., nys-tablet:nys-order-first).

Flex-gap

.nys-flex-gap-1px

.nys-flex-gap-2px

.nys-flex-gap-50

.nys-flex-gap-100

.nys-flex-gap-150

.nys-flex-gap-200

.nys-flex-gap-250

.nys-flex-gap-300

.nys-flex-gap-400

.nys-flex-gap-500

.nys-flex-gap-600

.nys-flex-gap-700

.nys-flex-gap-800

.nys-flex-gap-1200

<div class="nys-display-flex nys-flex-gap-1px">
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
  <div class="example"></div>
</div>
<div class="nys-display-flex nys-flex-gap-2px">
  ...
</div>
<div class="nys-display-flex nys-flex-gap-50">
  ...
</div>
<div class="nys-display-flex nys-flex-gap-100">
  ...
</div>
<div class="nys-display-flex nys-flex-gap-150">
  ...
</div>
<div class="nys-display-flex nys-flex-gap-200">
  ...
</div>
<div class="nys-display-flex nys-flex-gap-250">
  ...
</div>
<div class="nys-display-flex nys-flex-gap-300">
  ...
</div>
<div class="nys-display-flex nys-flex-gap-400">
  ...
</div>
<div class="nys-display-flex nys-flex-gap-500">
  ...
</div>
<div class="nys-display-flex nys-flex-gap-600">
  ...
</div>
<div class="nys-display-flex nys-flex-gap-700">
  ...
</div>
<div class="nys-display-flex nys-flex-gap-800">
  ...
</div>
<div class="nys-display-flex nys-flex-gap-1200">
  ...
</div>

Order

intital: 1 .nys-order-11

intital: 2 .nys-order-10

intital: 3 .nys-order-9

intital: 4 .nys-order-8

intital: 5 .nys-order-7

intital: 6 .nys-order-6

intital: 7 .nys-order-5

intital: 8 .nys-order-4

intital: 9 .nys-order-3

intital: 10 .nys-order-2

intital: 11 .nys-order-1

intital: 12 .nys-order-0

intital: 13 .nys-order-initial

intital: 14 .nys-order-last

intital: 15 .nys-order-first

<div class="nys-grid-row">
  <div class="nys-grid-col nys-order-11"></div>
  <div class="nys-grid-col nys-order-10"></div>
  <div class="nys-grid-col nys-order-9"></div>
  <div class="nys-grid-col nys-order-8"></div>
  <div class="nys-grid-col nys-order-7"></div>
  <div class="nys-grid-col nys-order-6"></div>
  <div class="nys-grid-col nys-order-5"></div>
  <div class="nys-grid-col nys-order-4"></div>
  <div class="nys-grid-col nys-order-3"></div>
  <div class="nys-grid-col nys-order-2"></div>
  <div class="nys-grid-col nys-order-1"></div>
  <div class="nys-grid-col nys-order-0"></div>
  <div class="nys-grid-col nys-order-initial"></div>
  <div class="nys-grid-col nys-order-last"></div>
  <div class="nys-grid-col nys-order-first"></div>
</div>

Edit this page on GitHub (Permissions required)

Last updated: May 20, 2026