---
layout: post
title:  "Flex Aligners"
subtitle: "Flexbox is a relatively new feature in CSS that allows for easy alignment of content. A number of helper classes are included in chameleon that allow for flexbox to quickly be used."
categories: layout
permalink: /layout/flex/
---

<div class="pattern">
  <div class="grid grid--collapse">
    <div class="grid__columns-12">
      <div class="flex-block u-vertical-align u-horizontal-align">
        <p>This is aligned vertically and horizontally</p>
      </div>
    </div>
  </div>
</div>


``` html
<div class="u-vertical-align u-horizontal-align">
  <p>This is aligned vertically and horizontally</p>
</div>
```