roobie/docs/layout/align-items.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 Items
Align items opposite of the main axis.  Requires flex display.

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

## Usage

### Row
#### Start
<div class="row aln-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="row aln-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="row aln-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="row aln-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="row aln-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="row aln-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="row aln-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="row aln-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="row aln-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="row aln-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="row aln-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="row aln-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="row aln-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="row aln-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>
```

### Column
#### Start
<div class="col aln-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="col aln-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="col aln-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="col aln-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="col aln-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="col aln-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="col aln-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="col aln-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="col aln-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="col aln-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="col aln-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="col aln-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="col aln-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="col aln-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>
```