styled-system-flex-box

Styled-Flex-Box

React primitive UI components built with styled-components and styled-system. Inspired by Rebass

Compatible with React and React-Native

npm i styled-system-flex-box

Set up your JSX layouts with <Flex /> , <Box /> , <Absolute /> , and <AbsoluteFlex /> components.

Try It Out

Try it out on CodeSandbox

Usage

import { Flex, Box } from 'styled-flex-box'
// Or for react-native use
// import { Flex, Box } from 'styled-flex-box/native'

function AwesomeComponent() {
  return (
    <Flex flexDirection="row" justifyContent="space-between" width="100%">
      <Box p="m">Thing One</Box>
      <Box p="m">Thing Two</Box>
    </Flex>
  );
}

With the <Box /> component you now have access to many common props as well as any props injected by your styled-components <ThemeProvider/>

Box

Space

Space

Box consumes styled-system's space helper

<style> .centered-text { display: flex; align-items: center; justify-content: center; line-height: 70px; } .content-wrapper { display: flex; align-items: center; justify-content: center; height: 70px; background: #f5f5f5; position: relative; } .box { position: relative; z-index: 3; background: rgb(168, 198,229); width: 20px; height: 20px; box-sizing: border-box; border: 1px solid black; } .padding-example { position: absolute; z-index: 2; background: rgb(201 221 187); box-sizing: border-box; border: 1px dashed black; } .margin-example { position: absolute; z-index: 1; background: rgb(252, 238, 194); box-sizing: border-box; border: 1px solid black; } </style>

Description

Code

Example

A Plain Box

<Box />

padding

<Box p="10px" />

padding-top

<Box pt="10px" />

padding-bottom

<Box pb="10px" />

padding-y-axis

<Box py="10px" />

padding-left

<Box pl="10px" />

padding-right

<Box pr="10px" />

padding-x-axis

<Box px="10px" />

margin

<Box p="10px" m="10px" />

margin-top

<Box p="10px" mt="10px/>

margin-bottom

<Box p="10px" mb="10px" />

margin-y-axis

<Box py="10px" />

margin-left

<Box pl="10px" />

margin-right

<Box pr="10px" />

margin-x-axis

<Box px="10px" />

If the app is consuming a ThemeContext then the <Box /> component can also consume spacing via object-key shortcuts:

const theme = {
  space: {
    s: 4,
    m: 8,
    l: 16
  }
};

<ThemeProvider theme={theme}>
  <Box p="m">This has the same padding</Box>
  <Box p="8px">as this</Box>
</ThemeProvider>

TODO: Document all Box, Flex, Absolute, and AbsoluteFlex props

---

Related

• System UI
• Rebass
• styled-components

MIT License