Container should be used as a wrapper for your main content. It provides the content with a max-width for larger screens and adds horizontal padding for mobile. You can use it to center page content horizontally or within other components, such as centering contents of the page header.
<Container> <View backgroundColor="neutral-faded" height={10} /> </Container>
By default, Container takes the entire width of the parent. It supports the width property, which accepts any string value, allowing you to use px, %, or any other valid CSS measurement. If you pass a number value, Container will use the width value as an x1 unit multiplier.
<Container width="1024px"> <View backgroundColor="neutral-faded" height={10} /> </Container>
You can also control its height and maxHeight with the same literal values.
<Container height="200px" maxHeight="50%" />
By default, Container has a horizontal padding of x4 units, but you can customize it using the padding property. For example, if you use Container to center content inside another component that already has its padding, you can completely remove it.
<ActionBar> <Container width="1024px" padding={0}> Your content </Container> </ActionBar>
Container contents can be aligned vertically and horizontally using the align and justify properties, which match the flexbox styles.
<Container align="center" justify="center" />