FlexItem

Align Self

Flex's alignItems prop will align its items along the cross axis. The alignSelf prop allows an override of that value for specific items.

stretch
start
center
end
stretch
start
center
end
() => {
  const propValues = [
    'stretch', // same as default from Flex
    'start',
    'center',
    'end'
  ];

  const renderFlexItems = () =>
    propValues.map((value, index) => (
      <FlexItem alignSelf={value} key={index}>
        {value}
      </FlexItem>
    ));

  return (
    <DemoLayout>
      <Flex>{renderFlexItems()}</Flex>
      <Flex direction="column">{renderFlexItems()}</Flex>
    </DemoLayout>
  );
}