roobie/docs/layout/align-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.

# Align Content
How lines are spaced.  No effect if content is only 1 line.  Requires flex display and wrap.

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

## Usage

### Row
#### Start
<div class="div25 row wrp aln-cnt-start" style="height: 150px">   
    <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>
    <button type="button" class="btn btn-outline">Button 4</button>
    <button type="button" class="btn btn-outline">Button 5</button>
</div>

```html
<div class="div25 row wrp aln-cnt-start" style="height: 150px">   
    <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>
    <button type="button" class="btn btn-outline">Button 4</button>
    <button type="button" class="btn btn-outline">Button 5</button>
</div>
```

#### End
<div class="div25 row wrp aln-cnt-end" style="height: 150px">   
    <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>
    <button type="button" class="btn btn-outline">Button 4</button>
    <button type="button" class="btn btn-outline">Button 5</button>
    </div>

```html
<div class="div25 row wrp aln-cnt-end" style="height: 150px">   
    <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>
    <button type="button" class="btn btn-outline">Button 4</button>
    <button type="button" class="btn btn-outline">Button 5</button>
</div>
```

#### Between
<div class="div25 row wrp aln-cnt-between" style="height: 150px">   
    <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>
    <button type="button" class="btn btn-outline">Button 4</button>
    <button type="button" class="btn btn-outline">Button 5</button>
</div>

```html
<div class="div25 row wrp aln-cnt-between" style="height: 150px">   
    <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>
    <button type="button" class="btn btn-outline">Button 4</button>
    <button type="button" class="btn btn-outline">Button 5</button>
</div>
```

#### Around
<div class="div25 row wrp aln-cnt-around" style="height: 150px">  
    <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>
    <button type="button" class="btn btn-outline">Button 4</button>
    <button type="button" class="btn btn-outline">Button 5</button>
</div>

```html
<div class="div25 row wrp aln-cnt-around" style="height: 150px">  
    <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>
    <button type="button" class="btn btn-outline">Button 4</button>
    <button type="button" class="btn btn-outline">Button 5</button>
</div>
```

#### Center
<div class="div25 row wrp aln-cnt-center" style="height: 150px">   
    <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>
    <button type="button" class="btn btn-outline">Button 4</button>
    <button type="button" class="btn btn-outline">Button 5</button>
</div>

```html
<div class="div25 row wrp aln-cnt-center" style="height: 150px">   
    <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>
    <button type="button" class="btn btn-outline">Button 4</button>
    <button type="button" class="btn btn-outline">Button 5</button>
</div>
```

#### Base
<div class="div25 row wrp aln-cnt-base" style="height: 150px">   
    <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>
    <button type="button" class="btn btn-outline">Button 4</button>
    <button type="button" class="btn btn-outline">Button 5</button>
</div>

```html
<div class="div25 row wrp aln-cnt-base" style="height: 150px">   
    <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>
    <button type="button" class="btn btn-outline">Button 4</button>
    <button type="button" class="btn btn-outline">Button 5</button>
</div>
```

#### Stretch
<div class="div25 row wrp aln-cnt-stretch" style="height: 150px"> 
    <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>
    <button type="button" class="btn btn-outline">Button 4</button>
    <button type="button" class="btn btn-outline">Button 5</button>
</div>

```html
<div class="div25 row wrp aln-cnt-stretch" style="height: 150px"> 
    <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>
    <button type="button" class="btn btn-outline">Button 4</button>
    <button type="button" class="btn btn-outline">Button 5</button>
</div>
```

### Column
#### Start
<div class="col wrp aln-cnt-start" style="height: 150px">   
    <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>
    <button type="button" class="btn btn-outline">Button 4</button>
    <button type="button" class="btn btn-outline">Button 5</button>
</div>

```html
<div class="col wrp aln-cnt-start" style="height: 150px">   
    <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>
    <button type="button" class="btn btn-outline">Button 4</button>
    <button type="button" class="btn btn-outline">Button 5</button>
</div>
```

#### End
<div class="col wrp aln-cnt-end" style="height: 150px">   
    <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>
    <button type="button" class="btn btn-outline">Button 4</button>
    <button type="button" class="btn btn-outline">Button 5</button>
    </div>

```html
<div class="col wrp aln-cnt-end" style="height: 150px">   
    <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>
    <button type="button" class="btn btn-outline">Button 4</button>
    <button type="button" class="btn btn-outline">Button 5</button>
</div>
```

#### Between
<div class="col wrp aln-cnt-between" style="height: 150px">   
    <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>
    <button type="button" class="btn btn-outline">Button 4</button>
    <button type="button" class="btn btn-outline">Button 5</button>
</div>

```html
<div class="col wrp aln-cnt-between" style="height: 150px">   
    <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>
    <button type="button" class="btn btn-outline">Button 4</button>
    <button type="button" class="btn btn-outline">Button 5</button>
</div>
```

#### Around
<div class="col wrp aln-cnt-around" style="height: 150px">  
    <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>
    <button type="button" class="btn btn-outline">Button 4</button>
    <button type="button" class="btn btn-outline">Button 5</button>
</div>

```html
<div class="col wrp aln-cnt-around" style="height: 150px">  
    <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>
    <button type="button" class="btn btn-outline">Button 4</button>
    <button type="button" class="btn btn-outline">Button 5</button>
</div>
```

#### Center
<div class="col wrp aln-cnt-center" style="height: 150px">   
    <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>
    <button type="button" class="btn btn-outline">Button 4</button>
    <button type="button" class="btn btn-outline">Button 5</button>
</div>

```html
<div class="col wrp aln-cnt-center" style="height: 150px">   
    <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>
    <button type="button" class="btn btn-outline">Button 4</button>
    <button type="button" class="btn btn-outline">Button 5</button>
</div>
```

#### Base
<div class="col wrp aln-cnt-base" style="height: 150px">   
    <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>
    <button type="button" class="btn btn-outline">Button 4</button>
    <button type="button" class="btn btn-outline">Button 5</button>
</div>

```html
<div class="col wrp aln-cnt-base" style="height: 150px">   
    <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>
    <button type="button" class="btn btn-outline">Button 4</button>
    <button type="button" class="btn btn-outline">Button 5</button>
</div>
```

#### Stretch
<div class="col wrp aln-cnt-stretch" style="height: 150px"> 
    <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>
    <button type="button" class="btn btn-outline">Button 4</button>
    <button type="button" class="btn btn-outline">Button 5</button>
</div>

```html
<div class="col wrp aln-cnt-stretch" style="height: 150px"> 
    <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>
    <button type="button" class="btn btn-outline">Button 4</button>
    <button type="button" class="btn btn-outline">Button 5</button>
</div>
```