GorangoCSS Docs
Project HomeProject Repo
  • Overview
  • Changelog
  • Contributing
    • Contributing to GorangoCSS
    • Contributing to the Docs
  • Layouts
    • Hero
    • Columns
    • Flex
  • Components
    • Buttons
    • Notice
    • Card
    • Highlight
    • Float
    • Badge
  • Utilities
    • Background Color
    • Border
      • Border Properties
      • Rounded Border
    • Margin
    • Padding
Powered by GitBook
LogoLogo

© Kawanua Indo Digital

On this page
  • Class
  • Code Sample

Was this helpful?

  1. Layouts

Flex

Since 1.8.0

Class

.flex
.flex--{wrap | nowrap | reverse}

Code Sample

.flex

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

.flex--wrap

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

.flex--nowrap

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

.flex--reverse

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

Last updated 4 years ago

Was this helpful?