Flex
Since 1.8.0

Class

1
.flex
Copied!
1
.flex--{wrap | nowrap | reverse}
Copied!

Code Sample

.flex

1
<div class="flex">
2
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-1</div>
3
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-2</div>
4
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-3</div>
5
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-4</div>
6
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-5</div>
7
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-6</div>
8
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-7</div>
9
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-8</div>
10
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-9</div>
11
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-10</div>
12
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-11</div>
13
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-12</div>
14
</div>
Copied!

.flex--wrap

1
<div class="flex--wrap">
2
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-1</div>
3
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-2</div>
4
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-3</div>
5
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-4</div>
6
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-5</div>
7
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-6</div>
8
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-7</div>
9
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-8</div>
10
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-9</div>
11
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-10</div>
12
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-11</div>
13
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-12</div>
14
</div>
Copied!

.flex--nowrap

1
<div class="flex--nowrap">
2
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-1</div>
3
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-2</div>
4
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-3</div>
5
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-4</div>
6
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-5</div>
7
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-6</div>
8
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-7</div>
9
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-8</div>
10
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-9</div>
11
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-10</div>
12
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-11</div>
13
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-12</div>
14
</div>
Copied!

.flex--reverse

1
<div class="flex--reverse">
2
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-1</div>
3
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-2</div>
4
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-3</div>
5
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-4</div>
6
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-5</div>
7
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-6</div>
8
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-7</div>
9
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-8</div>
10
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-9</div>
11
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-10</div>
12
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-11</div>
13
<div class="column--1 bg--gainsboro rounded--6 pa--1">Column-12</div>
14
</div>
Copied!
Last modified 1yr ago
Copy link