### Queues

Here's an example of a navbar created using the default `.Flex_row` modifier. (Note how we're using the `[shift]` attribute to push the last two siblings to the end of the queue!)

```jsx
import Title from '@ui/components/Title';
import Box from '@ui/components/Box';

<Box>
  <Flex align="baseline">
    <Title level={5} shift="end">
      <b>Navbar</b>
    </Title>
    <a href="#1">Box 1</a>
    <a href="#2">Box 2</a>
  </Flex>
</Box>
```

### Stacks

You can also easily create a stacked layout with the `.Flex_col` modifer. (Notice how this uses the exact same inner HTML as our previous navbar example, especially the `[shift]` attribute!)

```jsx
import Title from '@ui/components/Title';
import Box from '@ui/components/Box';

// stacked layouts usually need an explicit height
const height = 215;
const width  = 130;

<Flex layout="col" inline="true">
  <Box style={{height, width}} className="Flex_inner">
    <Title level={5} shift="end">
      <b>Navbar</b>
    </Title>
    <a href="#1">Box 1</a>
    <a href="#2">Box 2</a>
  </Box>
</Flex>
```

### Modifiers

Use the following modifier attributes on direct `<Flex>` descendants to custom your layouts:

- **`[shift]`**: "start", "end" <br>
  *Use the `shift` attribute to push flex children around.*
- **`[flex]`**: "inner" <br>
  *Use the `flex` attribute to inherit all flex properties.*

> **@todo**: these modifiers should *really* be refactored in to BEM-style classnames...
>
> ---