Flex

A wrapper component that extends Box to create layouts using Flexbox.

children


  <Box width={1/2} p="x3" m="x3" bg="blackBlue"></Box>
  <Box width={1/2} p="x3" m="x3" bg="darkBlue"></Box>


  <Box width={1/2} p="x3" m="x3" bg="blackBlue"></Box>
  <Box width={1/2} p="x3" m="x3" bg="darkBlue"></Box>

width

lightBlue

color

black

padding

boxShadow

borderRadius

small

medium

circle

import * as React from "react";
import { Flex, Box } from "@nulogy/components";

export default () => {
  return (
    <Flex width="100%" bg="lightBlue" color="black">
      <Box
        width={1 / 2}
        p="x3"
        m="x3"
        bg="blackBlue"
      ></Box>
      <Box
        width={1 / 2}
        p="x3"
        m="x3"
        bg="darkBlue"
      ></Box>
    </Flex>
  );
}

import * as React from "react";
import { Flex, Box } from "@nulogy/components";

export default () => {
  return (
    <Flex width="100%" bg="lightBlue" color="black">
      <Box
        width={1 / 2}
        p="x3"
        m="x3"
        bg="blackBlue"
      ></Box>
      <Box
        width={1 / 2}
        p="x3"
        m="x3"
        bg="darkBlue"
      ></Box>
    </Flex>
  );
}

Responsive

Like Box, all props can be used responsively by using an object that defines small, medium and/or large, based on the theme.breakpoints object

This example displays columns on small screens and rows on large ones.

Props

Name	Type	Description
children	react node	Inner content
width	string	A width, in any unit.
bg	enum	A background colour, chosen from the theme. A unique value can also be provided.
color	enum	A text colour, chosen from the theme. A unique value can also be provided.
padding	enum	A padding, chosen from the theme. A unique value can also be provided.
boxShadow	enum	A box shadow size, chosen from the theme. A unique value can also be provided.
borderRadius	enum	A border radius, chosen from the theme. A uniique value can also be provided.

Flex

Responsive

Props

Related Components