Flex-box is a component for arranging and aligning elements in the interface.

Box

Box is a component for setting element size, paddings and margins.

import { Box } from '@semcore/ui/base-components';
import Button from '@semcore/ui/button';
import React from 'react';

const Demo = () => (
  <div>
    <Box tag={Button} mr={2}>
      Button 1
    </Box>
    <Box tag={Button} mr={2}>
      Button 2
    </Box>
    <Box tag={Button} mr={2}>
      Button 3
    </Box>
    <Box tag={Button} mr={2}>
      Button 4
    </Box>
  </div>
);

export default Demo;

Flex

Flex is a component for aligning elements. It's a wrapper over CSS-flex.

import { Box, Flex } from '@semcore/ui/base-components';
import React from 'react';

const Demo = () => {
  const styleBox = {
    background: 'rgba(79, 96, 213, 0.5)',
  };

  return (
    <div>
      <Flex justifyContent='space-between'>
        <Box m={5} p={5} style={styleBox} />
        <Box m={5} p={5} style={styleBox} />
        <Box m={5} p={5} style={styleBox} />
      </Flex>
      <hr />
      <Flex alignItems='center'>
        <Box h={100} m={5} p={5} style={styleBox} />
        <Box h={60} m={5} p={5} style={styleBox} />
        <Box ml='auto' m={5} p={5} style={styleBox} />
      </Flex>
    </div>
  );
};

export default Demo;