Как правильно выровнять в flex? - PullRequest
Новая
       27

Как правильно выровнять в flex?

0 голосов
/ 22 января 2019

В моем ответе styled-component у меня есть компонент Flex с парой детей и отдельный компонент: 

<Flex align="center" justify="flex-end" flex="1 0 auto" px={[12, 18]}>
  {children}
  <AlertBell path={pathname} />
</Flex>

Я пытаюсь выровнять дочерние элементы и AlertBell компонент вправо. Однако, когда я добавляю больше поля к AlertBell, дети не двигаются влево. Как правильно выровнять элементы даже при увеличении поля в AlertBell?

1 Ответ

0 голосов
/ 22 января 2019

Существуют небольшие различия в требуемом синтаксисе: 

<Flex alignItems="center" justifyContent="flex-end" flex="1 0 auto" px={[12, 18]}>
    {children}
    <AlertBell path={pathname} />
</Flex>

alignItems="center" также является значением по умолчанию в текущей версии.flex prop для этого не потребуется, так как это относится к самой оболочке.

...