# flex The markup of every demo on , extracted from that page. It is generated, so it cannot disagree with what the page renders. Load the framework from the origin and read first: a Kuiper class carries no prefix and a UIkit behavior attribute carries `data-`. ## display Varies: the `grid-*` ladder over 2 rungs, `4xs` to `xs`. ```html

flex

1
2
3

flex-inline

1
2
3
``` ## horizontal alignment Varies: the `grid-*` ladder over 2 rungs, `4xs` to `xs`. ```html

flex-left

1
2
3

flex-center

1
2
3

flex-right

1
2
3

flex-between

1
2
3

flex-around

1
2
3
``` ## vertical alignment Varies: the `grid-*` ladder over 2 rungs, `4xs` to `xs`. ```html

flex-stretch

1
2
3

flex-top

1
2
3

flex-middle

1
2
3

flex-bottom

1
2
3
``` ## direction Varies: the `grid-*` ladder over 2 rungs, `4xs` to `xs`. ```html

flex-row

1
2
3

flex-row-reverse

1
2
3

flex-column

1
2
3

flex-column-reverse

1
2
3
``` ## wrap Varies: the `grid-*` ladder over 2 rungs, `4xs` to `xs`. ```html

flex-wrap

1
2
3
4
5
6

flex-nowrap

1
2
3
4
5
6

flex-wrap-reverse

1
2
3
4
5
6
``` ## wrap alignment Varies: the `grid-*` ladder over 2 rungs, `4xs` to `xs`. ```html

flex-wrap-top

1
2
3
4
5
6

flex-wrap-middle

1
2
3
4
5
6

flex-wrap-bottom

1
2
3
4
5
6

flex-wrap-stretch

1
2
3
4
5
6

flex-wrap-between

1
2
3
4
5
6

flex-wrap-around

1
2
3
4
5
6
``` ## order Varies: the `grid-*` ladder over 2 rungs, `4xs` to `xs`. ```html

flex-first

1
first
3

flex-last

1
last
3
``` ## item Varies: the `grid-*` ladder over 2 rungs, `4xs` to `xs`. ```html

flex-1

1
1
3

flex-auto

1
auto
3

flex-initial

1
initial
3

flex-none

1
none
3
```