Flex

Align Items

The alignItems prop defines the alignment of items along the cross axis (vertical, if direction is row; horizontal, if direction is column).

A
B
C
A
B
C
A
B
C
A
B
C
A
B
C
A
B
C
A
B
C
A
B
C
() => {
  const propValues = [
    'stretch', // default
    'start',
    'center',
    'end'
  ];

  const renderFlexes = ({ column }) => (
    propValues.map((value, index) => (
      <Flex
        alignItems={value}
        direction={column ? 'column' : 'row'}
        key={column ? 'c-' + index : index}>
        <FlexItem>A</FlexItem>
        <FlexItem>B</FlexItem>
        <FlexItem>C</FlexItem>
      </Flex>
    ))
  );

  return (
    <DemoLayout>
      { renderFlexes({ column: false }) }
      { renderFlexes({ column: true }) }
    </DemoLayout>
  )
}