Как выровнять элементы справа и рядом друг с другом, используя flex? - PullRequest
Новая
       21

Как выровнять элементы справа и рядом друг с другом, используя flex?

0 голосов
/ 02 февраля 2019

В моем компоненте PageHeader у меня есть 2 компонента, которые составляют заголовок: пользовательский компонент и содержимое заголовка портала из компонента Flexstuff: 

<Container>
    <Flex direction="row">
      <Flex
        pl={[0, 18]}
        width={[1, 'auto']}
        justify={['center', 'flex-start']}
        align="center"
      >
      </Flex>
      <Flex align="center" justify="flex-end" flex="1 0 auto" px={[12, 18]}>
        {children}<User />
      </Flex>
    </Flex>
</Container>

Это часть компонента FlexStuff: 

render() {
    const PortalContent = (
      <SearchWidgetWrapper>
        <SearchWidgetContent justify="flex-end" mx="auto">
          <SearchContainer>
           <Box>FlexStuff header content</Box>
          </SearchContainer>
        </SearchWidgetContent>
      </SearchWidgetWrapper>
    );

    return [
      <Box p={24} flex="1 0 auto" column>
              this is FlexStuff basic content
      </Box>,
      ReactDOM.createPortal(PortalContent, HEADER_CONTAINER),
    ];
}

Когда я бегу, я вижу в заголовке: 

this is User Component
        FlexStuff header content

Я ожидал, что все будет выровнено вправо.Кроме того, почему содержимое заголовка Flexstuff находится ниже компонента пользователя?Как я могу отобразить это рядом друг с другом? Ссылка на github

...