---
name: Containers
route: /containers/
---

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

<demos.Star/>

# Containers

We have two general purpose *single child* containers `Stretch` and `Content`. The ideas of *stretch* and *content* are explained in the [sizing principle][principle-sizing]. If you have more than one child item, you probably want to use something like a [Vertical][vertical] or [Horizontal][horizontal].

Here are few reasons why you should use these containers:
* Allow you to work with the stretch / content sizing principle.
* Allow you to control their child alignment.
* They support [BaseProps][common-types].

These containers behave the same as a `Vertical` with `horizontalAlign='left'` (instead of the default `stretch`) and `spacing={0}`.

## Stretch
Stretch into the parent container.

In the example below, we have an explicit sized `Vertical` (background `lightskyblue`) with an inner `Stretch` (background `darkorange`). The inner `Stretch` keeps its size to match that of the outer container (observed below as you don't see the background of the parent-lightskyblue as it is filled in by the child-darkorange).

<Playground>
  <Vertical height={100} style={{backgroundColor: "lightskyblue"}}>
    <Stretch style={{backgroundColor: "darkorange"}}>
        I'm taking up all the space from the parent
    </Stretch>  
  </Vertical>
</Playground>

* `sizing?: number` prop allows you to control the stretch ratio (concept covered in [sizing principle][principle-sizing]) eg. a 1,2 ratio (`Horizontal(Stretch:1,Stretch:2)`) is shown below:

<Playground>
  <Horizontal height={100} spacing={0} style={{backgroundColor: "lightskyblue"}}>
    <Stretch sizing={1} style={{backgroundColor: "darkorange"}}>
        I'm taking 1
    </Stretch>  
    <Stretch sizing={2} style={{backgroundColor: "lightpink"}}>
        I'm taking 2
    </Stretch>
  </Horizontal>
</Playground>

## Content
Content takes up as much space as needed its child.

In the example below we throw a few `Content` items in a `Vertical(Content,Content,Content)` structure: 

<Playground>
  <Vertical style={{backgroundColor: "lightskyblue"}}>
    <Content style={{backgroundColor: "darkorange"}}>
        I'm taking up as much space as needed by this text
    </Content>
    <Content style={{backgroundColor: "lightpink"}}>
        I'm taking up as much space as needed by this text
    </Content>
    <Content style={{backgroundColor: "limegreen"}}>
        I'm taking up as much space as needed by this text
    </Content>
  </Vertical>
</Playground>

If you want to have multiple children e.g. `<Content><b>Hello</b> is it me you are looking for</Content>` you can use `wrapInSpan` to ensure flexbox sees a single child and flex-direction properies don't mess with children.

<Playground>
  <Content style={{backgroundColor: "darkorange"}} wrapInSpan>
    <b>Hello</b> is it me you are looking for.
    <b>Hello</b> is it me you are looking for.
    <b>Hello</b> is it me you are looking for.
    <b>Hello</b> is it me you are looking for.
    <b>Hello</b> is it me you are looking for.
  </Content>
</Playground>

## Box
A more general purpose `Box` component exists that supports the `sizing` property allowing you to dynamically switch between `Content` or `Stretch` based on your requirement.

Example `<Box sizing='stretch'/>` same as `<Stretch/>`: 

<Playground>
  <Vertical height={100} style={{backgroundColor: "lightskyblue"}}>
    <Box sizing='stretch' style={{backgroundColor: "darkorange"}}>
        I'm taking up all the space from the parent
    </Box>  
  </Vertical>
</Playground>

Example `<Box sizing='content'/>` same as `<Content/>`: 

<Playground>
  <Vertical height={100} style={{backgroundColor: "lightskyblue"}}>
    <Box sizing='content' style={{backgroundColor: "darkorange"}}>
        I'm taking up as much space as needed by this text
    </Box>  
  </Vertical>
</Playground>

## BaseProps
`Stretch`, `Content` and `Box` [support all `BaseProps`][common-types].

## Alignment
`Stretch`, `Content` and `Box` support the same alignment as [`Vertical`][vertical]. 

Example `center,center`: 

<Playground>
  <Content height ="100px" verticalAlign="center" horizontalAlign="center" style={{backgroundColor: "darkorange"}}>
    <div style={{backgroundColor: 'lightskyblue'}}>I'm just a div in a orange Content(center,center)</div>
  </Content>
</Playground>


## Example use case: Table

It is common to have a table of items with some fixed width, some stretch items. 

Below we power the table with a `Vertical` containing rows of `Horizontal(Content(width=explicit),Stretch(1),Stretch(2))`:

<Playground>
  <Vertical spacing={10} style={{backgroundColor: "lightskyblue"}}>
    <Horizontal height={100} spacing={10}>
      <Content width={100} style={{backgroundColor: "limegreen"}}>Exactly 100px</Content>
      <Stretch sizing={1} style={{backgroundColor: "darkorange"}}>
          I'm taking 1 from remainder
      </Stretch>  
      <Stretch sizing={2} style={{backgroundColor: "lightpink"}}>
          I'm taking 2 from remainder
      </Stretch>
    </Horizontal>
    <Horizontal height={100} spacing={10}>
      <Content width={100} style={{backgroundColor: "limegreen"}}>Row 2</Content>
      <Stretch sizing={1} style={{backgroundColor: "darkorange"}}>
          Row 2
      </Stretch>  
      <Stretch sizing={2} style={{backgroundColor: "lightpink"}}>
          Row 2
      </Stretch>
    </Horizontal>
  </Vertical>
</Playground>


[common-types]:../common-types/
[principle-spacing]:../principle-spacing/
[principle-sizing]:../principle-sizing/
[vertical]:../vertical/
[horizontal]:../horizontal/