Flex

The Flex component from Superset's UI library.

Live Example

Loading component...

Try It

Edit the code below to experiment with the component:

Live Editor

function Demo() {
  return (
    <Flex gap="small" wrap="wrap">
      {['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'].map(item => (
        <div
          key={item}
          style={{
            padding: '8px 16px',
            background: '#e6f4ff',
            border: '1px solid #91caff',
            borderRadius: 4,
          }}
        >
          {item}
        </div>
      ))}
    </Flex>
  );
}

Result

Loading...

Vertical Layout

Live Editor

function VerticalFlex() {
  return (
    <Flex vertical gap="small">
      <Button buttonStyle="primary">Primary</Button>
      <Button buttonStyle="dashed">Dashed</Button>
      <Button buttonStyle="link">Link</Button>
    </Flex>
  );
}

Result

Loading...

Justify and Align

Live Editor

function JustifyAlign() {
  const boxStyle = {
    width: '100%',
    height: 120,
    borderRadius: 6,
    border: '1px solid #40a9ff',
  };
  const itemStyle = {
    width: 60,
    height: 40,
    backgroundColor: '#1677ff',
    borderRadius: 4,
  };
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      {['flex-start', 'center', 'flex-end', 'space-between', 'space-around'].map(justify => (
        <div key={justify}>
          <span style={{ marginBottom: 4, display: 'block', color: '#666' }}>{justify}</span>
          <Flex style={boxStyle} justify={justify} align="center">
            <div style={itemStyle} />
            <div style={itemStyle} />
            <div style={itemStyle} />
          </Flex>
        </div>
      ))}
    </div>
  );
}

Result

Loading...

Props

Prop	Type	Default	Description
vertical	boolean	false	-
wrap	string	"nowrap"	-
justify	string	"normal"	-
align	string	"normal"	-
flex	string	"normal"	-
gap	string	"small"	-

Import

import { Flex } from '@superset/components';

---

Improve this page

This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file.