# Displays and Layouts

### Display

Class | Display Value
--- | ---
`d-b` | block
`d-ib` | inline-block
`d-i` | inline
`d-f` | flex
`d-if` | inline-flex

### Flex Values

Use classes `flex-1` through `flex-10` to assign a flex value to a flexed child (parent has a flex display. Flex values will flex relative to each other's values.

    <div class="d-f">
      <div style="width: 100px">
        100px
      </div>
      <div class="flex">
        flex
      </div>
    </div>
    <div class="d-f">
      <div class="flex">
        flex
      </div>
      <div class="flex">
        flex
      </div>
    </div>
    <div class="d-f">
      <div class="flex">
        flex
      </div>
      <div class="flex-2">
        flex-2
      </div>
    </div>
    <div class="d-f">
      <div class="flex">
        flex
      </div>
      <div class="flex-3">
        flex-3
      </div>
    </div>

###### Output*

100px
flex
flex
flex
flex
flex-2
flex
flex-3

### 12 Column Grid

Create a parent with class `row` and children with class `col`, optionally add `span-*` classes (1-12).

    <div class="row">
      <div class="col">col</div>
      <div class="col">col</div>
      <div class="col">col</div>
    </div>
    <div class="row">
      <div class="col span-4">col span-4</div>
      <div class="col span-8">col span-8</div>
    </div>

###### Output*

col
col
col
col span-4
col span-8

##### Responsive 12 Column Grid

Optionally use `d-span-*` for desktop, `t-span-*` for tablet, and `m-span-*` for mobile to make the grid responsive.

    <div class="row">
      <div class="col d-span-3 t-span-6 m-span-12">
        col d-span-3 t-span-6 m-span-12
      </div>
      <div class="col d-span-3 t-span-6 m-span-12">
        col d-span-3 t-span-6 m-span-12
      </div>
      <div class="col d-span-3 t-span-6 m-span-12">
        col d-span-3 t-span-6 m-span-12
      </div>
      <div class="col d-span-3 t-span-6 m-span-12">
        col d-span-3 t-span-6 m-span-12
      </div>
    </div>

###### Output*

##### Alternative Responsive 12 Column Grid

Rather than declairing a size for device sizes, you should consider just giving each section a `min-width` that correspondes to the minumum space it requires to be useable, and let Kempo do the rest.

    <k-resize dimention="width">
      <div class="row">
        <div class="col" style="min-width: 150px">col, min-width: 150px</div>
        <div class="col" style="min-width: 200px">col, min-width: 200px</div>
        <div class="col" style="min-width: 300px">col, min-width: 300px</div>
      </div>
    </k-resize>

###### Output*

col, min-width: 150px
col, min-width: 200px
col, min-width: 300px

### * Notes

Additional styles may be added to the example output (borders, spacing, colors) for demonstration.