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.

Flex

.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

Example Code

  <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

Example Code

<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

Example Code

<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

Example Code

<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

Example Code

<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

Example Code

<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

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

Example Code

<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>