Since 1.8.0
.flex
.flex--{wrap | nowrap | reverse}
<div class="flex"><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-1</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-2</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-3</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-4</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-5</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-6</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-7</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-8</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-9</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-10</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-11</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-12</div></div>
<div class="flex--wrap"><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-1</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-2</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-3</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-4</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-5</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-6</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-7</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-8</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-9</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-10</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-11</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-12</div></div>
<div class="flex--nowrap"><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-1</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-2</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-3</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-4</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-5</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-6</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-7</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-8</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-9</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-10</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-11</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-12</div></div>
<div class="flex--reverse"><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-1</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-2</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-3</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-4</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-5</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-6</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-7</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-8</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-9</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-10</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-11</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-12</div></div>