---
name: Horizontal
route: /horizontal/
---

import { Playground } from 'docz';
import { Horizontal, Vertical, Stretch, Content, StretchSpacer } from '../..'; 
import * as demos from '../../demos'; 

<demos.Star/>

# Horizontal 

Lays out children in a horiztonally spaced layout ([default spacing is 24px][defaults]).

<Playground>
  <Horizontal>
    <Stretch style={{backgroundColor: "lightskyblue"}}>Hello</Stretch>
    <Stretch style={{backgroundColor: "lightpink"}}>World</Stretch>
  </Horizontal>
</Playground>

Since `Horizontal` follows the [spacing principle][principle-spacing] you can compose / nest `Horizontal`s easily. The following example has two `Horizontal`s in a `Horizontal(Horizontal(blue,pink),Horizontal(blue,pink))` heirarchy but to the user it looks seemless (like a single `Horizontal(blue,pink,blue,pink)`). This ability to nest allows you to easily create and reuse components without having to worry about how they will get used.

<Playground>
  <Horizontal>
    <Horizontal sizing="stretch">
      <Stretch style={{backgroundColor: "lightskyblue"}}>Hello</Stretch>
      <Stretch style={{backgroundColor: "lightpink"}}>World</Stretch>
    </Horizontal>
    <Horizontal sizing="stretch">
      <Stretch style={{backgroundColor: "lightskyblue"}}>Hello</Stretch>
      <Stretch style={{backgroundColor: "lightpink"}}>World</Stretch>
    </Horizontal>
  </Horizontal>
</Playground>

## Alignment
By default `horizontalAlign:left` and `verticalAlign:stretch`. It helps you write simple horizontal layouts that start horizontally at left and fill the vertical space completely: 

<Playground>
  <Horizontal height={60}>
    <Content verticalAlign="center" style={{backgroundColor: "lightskyblue"}}>Hello</Content>
    <Content verticalAlign="center" style={{backgroundColor: "lightpink"}}>World</Content>
  </Horizontal>
</Playground>

* `verticalAlign?: 'stretch' /** default */ | 'top' | 'center' | 'bottom' | 'baseline'` Controls vertical alignment of children. e.g. `verticalAlign='top'` gives us:

<Playground>
  <Horizontal verticalAlign='top' height={60}>
    <div style={{backgroundColor: "lightskyblue"}}>Hello</div>
    <div style={{backgroundColor: "lightpink"}}>World</div>
  </Horizontal>
</Playground>

* `horizontalAlign?: 'left' /** default */ | 'center' | 'right'` Controls horizontal alignment of children. e.g. `horizontalAlign='right'` gives us:

<Playground>
  <Horizontal horizontalAlign='right' height={60}>
    <Content verticalAlign="center" style={{backgroundColor: "lightskyblue"}}>Hello</Content>
    <Content verticalAlign="center" style={{backgroundColor: "lightpink"}}>World</Content>
  </Horizontal>
</Playground>

## Spacing

`Horizontal` [supports `spacing`][common-types].

## BaseProps

`Horizontal` [supports all `BaseProps`][common-types].

## SizingProp

`Horizontal` supports the `sizing` prop as explained in the [sizing principle][principle-sizing].

## Reverse
`Horizontal` takes `reverse` prop that lays out its children in *reverse* order of how they appear in the dom. 

Common use case: With bottom of the form `previous ---- next` buttons, `reverse` allows you to have tab order be intutive while the layout being visually appealing: 

<Playground>
  <Vertical spacing={5}>
    <input/>
    <Horizontal reverse={true}>
      <button>Next</button>
      <button>Reset</button>
      <StretchSpacer />
      <button>Back</button>
    </Horizontal>
  </Vertical>
</Playground>

## Tip: Baseline

`verticalAlign: 'baseline'` is really useful with mixed font sizes:

<Playground>
  <Horizontal verticalAlign='baseline' height={60} spacing={0}>
    <div style={{fontSize:'24px'}}>$100</div>
    <div style={{fontSize:'16px'}}>/month</div>
  </Horizontal>
</Playground>

[common-types]:../common-types/
[principle-spacing]:../principle-spacing/
[principle-sizing]:../principle-sizing/
[defaults]:../defaults/