ContainerHorizontal

This container is a simple flexbox container with flex-direction: row. It works in a similar way as a <View /> from react-native component library - it distributes the children elements but in a horizontal direction. The primary intention of this component is to build a layout for your application with a very simple set of CSS properties. It automaticaly tries to set its height to 100%. ContainerVertical is it's vertical variant. See a full usage on this page.

<div
  style={{
    height: 300
  }}
>
  <ContainerHorizontal>
    <div
      style={{
        background: 'red',
        flexGrow: 1
      }}
    />
    <div
      style={{
        background: 'blue',
        flexGrow: 1
      }}
    />
  </ContainerHorizontal>
</div>

<div style="height:300px">
  <div class="container-horizontal">
    <div style="background:red;flex-grow:1"></div>
    <div style="background:blue;flex-grow:1"></div>
  </div>
</div>

Prop table

Any props you would pass to div.