roobie/docs/layout/justify-content.md

A collection of CSS classes to keep you writing business logic in your HTML. Easily build maintainable web & mobile applications with 100s of pre-built CSS classes at your fingertips.

# Justify Content
Justify content on the main axis.  Requires flex display.

## Classes
```html
<div class="jst-start">Start</div>
<div class="jst-end">End</div>
<div class="jst-between">Between</div>
<div class="jst-around">Around</div>
<div class="jst-center">Center</div>
<div class="jst-base">Base</div>
<div class="jst-stretch">Stretch</div>
```
## Usage

### Row
#### Start
<div class="row jst-start">   
    <button type="button" class="btn btn-outline">Button 1</button>
    <button type="button" class="btn btn-outline">Button 2</button>
    <button type="button" class="btn btn-outline">Button 3</button>
</div>

```html
<div class="row jst-start">   
    <button type="button" class="btn btn-outline">Button 1</button>
    <button type="button" class="btn btn-outline">Button 2</button>
    <button type="button" class="btn btn-outline">Button 3</button>
</div>
```

#### End
<div class="row jst-end">   
    <button type="button" class="btn btn-outline">Button 1</button>
    <button type="button" class="btn btn-outline">Button 2</button>
    <button type="button" class="btn btn-outline">Button 3</button>
    </div>

```html
<div class="row jst-end">   
    <button type="button" class="btn btn-outline">Button 1</button>
    <button type="button" class="btn btn-outline">Button 2</button>
    <button type="button" class="btn btn-outline">Button 3</button>
</div>
```

#### Between
<div class="row jst-between">   
    <button type="button" class="btn btn-outline">Button 1</button>
    <button type="button" class="btn btn-outline">Button 2</button>
    <button type="button" class="btn btn-outline">Button 3</button>
</div>

```html
<div class="row jst-between">   
    <button type="button" class="btn btn-outline">Button 1</button>
    <button type="button" class="btn btn-outline">Button 2</button>
    <button type="button" class="btn btn-outline">Button 3</button>
</div>
```

#### Around
<div class="row jst-around">  
    <button type="button" class="btn btn-outline">Button 1</button>
    <button type="button" class="btn btn-outline">Button 2</button>
    <button type="button" class="btn btn-outline">Button 3</button>
</div>

```html
<div class="row jst-around">  
    <button type="button" class="btn btn-outline">Button 1</button>
    <button type="button" class="btn btn-outline">Button 2</button>
    <button type="button" class="btn btn-outline">Button 3</button>
</div>
```

#### Center
<div class="row jst-center">   
    <button type="button" class="btn btn-outline">Button 1</button>
    <button type="button" class="btn btn-outline">Button 2</button>
    <button type="button" class="btn btn-outline">Button 3</button>
</div>

```html
<div class="row jst-center">   
    <button type="button" class="btn btn-outline">Button 1</button>
    <button type="button" class="btn btn-outline">Button 2</button>
    <button type="button" class="btn btn-outline">Button 3</button>
</div>
```

#### Base
<div class="row jst-base">   
    <button type="button" class="btn btn-outline">Button 1</button>
    <button type="button" class="btn btn-outline">Button 2</button>
    <button type="button" class="btn btn-outline">Button 3</button>
</div>

```html
<div class="row jst-base">   
    <button type="button" class="btn btn-outline">Button 1</button>
    <button type="button" class="btn btn-outline">Button 2</button>
    <button type="button" class="btn btn-outline">Button 3</button>
</div>
```

#### Stretch
<div class="row jst-stretch"> 
    <button type="button" class="btn btn-outline">Button 1</button>
    <button type="button" class="btn btn-outline">Button 2</button>
    <button type="button" class="btn btn-outline">Button 3</button>
</div>

```html
<div class="row jst-stretch"> 
    <button type="button" class="btn btn-outline">Button 1</button>
    <button type="button" class="btn btn-outline">Button 2</button>
    <button type="button" class="btn btn-outline">Button 3</button>
</div>
```

### Column
#### Start
<div class="col jst-start" style="height: 250px">   
    <button type="button" class="btn btn-outline">Button 1</button>
    <button type="button" class="btn btn-outline">Button 2</button>
    <button type="button" class="btn btn-outline">Button 3</button>
</div>

```html
<div class="col jst-start" style="height: 250px">   
    <button type="button" class="btn btn-outline">Button 1</button>
    <button type="button" class="btn btn-outline">Button 2</button>
    <button type="button" class="btn btn-outline">Button 3</button>
</div>
```

#### End
<div class="col jst-end" style="height: 250px">   
    <button type="button" class="btn btn-outline">Button 1</button>
    <button type="button" class="btn btn-outline">Button 2</button>
    <button type="button" class="btn btn-outline">Button 3</button>
    </div>

```html
<div class="col jst-end" style="height: 250px">   
    <button type="button" class="btn btn-outline">Button 1</button>
    <button type="button" class="btn btn-outline">Button 2</button>
    <button type="button" class="btn btn-outline">Button 3</button>
</div>
```

#### Between
<div class="col jst-between" style="height: 250px">   
    <button type="button" class="btn btn-outline">Button 1</button>
    <button type="button" class="btn btn-outline">Button 2</button>
    <button type="button" class="btn btn-outline">Button 3</button>
</div>

```html
<div class="col jst-between" style="height: 250px">   
    <button type="button" class="btn btn-outline">Button 1</button>
    <button type="button" class="btn btn-outline">Button 2</button>
    <button type="button" class="btn btn-outline">Button 3</button>
</div>
```

#### Around
<div class="col jst-around" style="height: 250px">  
    <button type="button" class="btn btn-outline">Button 1</button>
    <button type="button" class="btn btn-outline">Button 2</button>
    <button type="button" class="btn btn-outline">Button 3</button>
</div>

```html
<div class="col jst-around" style="height: 250px">  
    <button type="button" class="btn btn-outline">Button 1</button>
    <button type="button" class="btn btn-outline">Button 2</button>
    <button type="button" class="btn btn-outline">Button 3</button>
</div>
```

#### Center
<div class="col jst-center" style="height: 250px">   
    <button type="button" class="btn btn-outline">Button 1</button>
    <button type="button" class="btn btn-outline">Button 2</button>
    <button type="button" class="btn btn-outline">Button 3</button>
</div>

```html
<div class="col jst-center" style="height: 250px">   
    <button type="button" class="btn btn-outline">Button 1</button>
    <button type="button" class="btn btn-outline">Button 2</button>
    <button type="button" class="btn btn-outline">Button 3</button>
</div>
```

#### Base
<div class="col jst-base" style="height: 250px">   
    <button type="button" class="btn btn-outline">Button 1</button>
    <button type="button" class="btn btn-outline">Button 2</button>
    <button type="button" class="btn btn-outline">Button 3</button>
</div>

```html
<div class="col jst-base" style="height: 250px">   
    <button type="button" class="btn btn-outline">Button 1</button>
    <button type="button" class="btn btn-outline">Button 2</button>
    <button type="button" class="btn btn-outline">Button 3</button>
</div>
```

#### Stretch
<div class="col jst-stretch" style="height: 250px"> 
    <button type="button" class="btn btn-outline">Button 1</button>
    <button type="button" class="btn btn-outline">Button 2</button>
    <button type="button" class="btn btn-outline">Button 3</button>
</div>

```html
<div class="col jst-stretch" style="height: 250px"> 
    <button type="button" class="btn btn-outline">Button 1</button>
    <button type="button" class="btn btn-outline">Button 2</button>
    <button type="button" class="btn btn-outline">Button 3</button>
</div>
```