Flex

행이거나 열이며, 어느 너비에서 하나가 다른 하나로 바뀌는지를 정합니다. 표면도 여백도 그리지 않고, 거터도 요청해야 그립니다.

import { Flex } from 'neba';

<Flex direction={{ xs: 'vertical', md: 'horizontal' }} spacing={3}>
  <Card />
  <Card />
</Flex>;

Props

Prop	타입	기본값	설명
direction	'horizontal' | 'vertical' | Partial<Record<NebaBreakpoint, 'horizontal' | 'vertical'>>	'horizontal'	줄이 흐르는 방향. horizontal은 row, vertical은 column입니다. 반응형이며, 이 컴포넌트가 존재하는 이유이기도 합니다. { xs: 'vertical', md: 'horizontal' }
reverse	boolean	false	direction이 고른 축을 따라 children을 반대로 흐르게 합니다. 모든 breakpoint에 한 번에 적용되며, 시각적 순서만 바꾸므로 DOM 순서는 그대로입니다
spacing	number | Partial<Record<NebaBreakpoint, number>>	0	children 사이의 거터. Tailwind의 spacing 스케일이라 spacing={4}는 1rem이며, GridContainer와 같은 prop·같은 스케일·같은 슬롯입니다
rowSpacing	number | Partial<Record<NebaBreakpoint, number>>	—	줄바꿈된 줄 사이의 거터만. spacing 위에 덮어씌워지므로, 한 breakpoint만 적어도 나머지에서 spacing이 사라지지 않습니다
columnSpacing	number | Partial<Record<NebaBreakpoint, number>>	—	줄을 따라가는 거터만. rowSpacing과 같은 방식으로 spacing 위에 덮어씌워집니다
justifyContent공통	'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch'	—	줄이 남은 공간을 어떻게 나누는지
alignItems공통	'start' | 'center' | 'end' | 'stretch' | 'baseline'	—	children이 줄을 가로질러 어디에 서는지
alignContent공통	'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch'	—	상자가 줄들보다 높을 때 줄바꿈된 줄들이 어디에 놓이는지
wrap	boolean	false	폭이 모자란 줄이 다음 줄로 이어질지. GridContainer와 반대로 기본이 꺼짐입니다. Flex는 대개 한 줄에 머물러야 하는 툴바나 필드 줄입니다
inline	boolean	false	상자를 inline으로 배치해 글줄 안에 놓습니다
render	useRender.RenderProp	—	div 대신 다른 요소로 렌더링합니다 (render={<nav />}). Base UI의 render prop 그대로
children	ReactNode	—	줄에 놓이는 것들

<div>의 기본 속성은 그대로 전달되며, render로 요소를 바꿀 수 있습니다. breakpoint별 map은 breakpoints에서, 공통 축은 prop 규칙에서 설명합니다.

예시

direction

horizontal은 row, vertical은 column입니다. CSS의 네 단어 대신 라이브러리 자신의 두 단어를 쓰므로 Flex와 Stack이 같은 것을 같은 말로 말합니다. 반응형이고, 이 컴포넌트가 존재하는 이유가 바로 이 prop입니다. 자리가 나면 나란히, 나기 전에는 위아래로 놓이는 컨트롤 한 쌍.

import { Button, Flex, TextField } from 'neba';

export default function FlexDirection() {
  return (
    // The commonest responsive form there is: a field and its action side by
    // side once there is room, and stacked before there is.
    <Flex direction={{ xs: 'vertical', sm: 'horizontal' }} spacing={2} className="w-full max-w-lg">
      <TextField label="Work email" placeholder="[email protected]" className="flex-1" fullWidth />
      <Button color="primary" className="sm:self-end">
        Request access
      </Button>
    </Flex>
  );
}

spacing

거터이며 Tailwind의 spacing 스케일 위에 있습니다. spacing={4}는 1rem으로 gap-4와 같은 길이입니다. GridContainer와 같은 prop, 같은 스케일이라 숫자 하나가 두 컴포넌트에서 같은 길이를 뜻하며, 다른 것들처럼 map도 받습니다. rowSpacing과 columnSpacing은 한 축만 정하는데, 각각 spacing을 대체하는 것이 아니라 그 위에 덮이므로 한 breakpoint만 적어도 나머지에서 거터가 사라지지 않습니다.

import { Chip, Flex } from 'neba';

const TAGS = ['production', 'staging', 'preview', 'canary', 'edge', 'legacy', 'archived'];

export default function FlexSpacing() {
  return (
    <Flex wrap spacing={{ xs: 1, md: 3 }} className="w-full max-w-md">
      {TAGS.map((tag) => (
        <Chip key={tag}>{tag}</Chip>
      ))}
    </Flex>
  );
}

justifyContent · alignItems

flexbox의 어휘를, 라이브러리의 나머지가 쓰는 철자로 씁니다. justifyContent는 줄에서 남은 공간을 나누고, alignItems는 children이 줄을 가로질러 어디에 서는지를 정합니다. 둘 다 반응형이 아닙니다. 이들은 class name이고, breakpoint별 class map은 Flex를 그리는 모든 페이지의 번들에 사다리 다섯 벌을 넣게 됩니다.

import { Avatar, Button, Flex, Typography } from 'neba';

export default function FlexAlignment() {
  return (
    <Flex justifyContent="space-between" alignItems="center" spacing={3} className="w-full">
      <Flex alignItems="center" spacing={2}>
        <Avatar name="Kim Minji" size="sm" />
        <div>
          <Typography level="body">Kim Minji</Typography>
          <Typography level="caption" color="secondary">
            Owner
          </Typography>
        </div>
      </Flex>
      <Button size="sm" variant="outline">
        Manage
      </Button>
    </Flex>
  );
}

wrap

기본이 꺼짐이며, 이는 GridContainer와 반대입니다. 그리드는 열이고 줄바꿈은 열이 하는 일이지만, Flex는 대개 한 줄에 머무르면서 children이 줄어들게 두어야 하는 툴바나 필드 줄입니다.

<Flex wrap spacing={2}>
  {tags.map((tag) => (
    <Chip key={tag}>{tag}</Chip>
  ))}
</Flex>

Flex와 Grid 중에서

Flex는 children이 무엇인지에 따라 크기를 정하고, Grid는 열 개수에 맞춰 정합니다. 툴바나 필드와 그 버튼, 카드의 footer처럼 "이것들을 한 줄에"가 답이면 Flex를 쓰세요. 너비가 페이지의 다른 요소와 맞아떨어져야 한다면 Grid를 쓰면 되고, 열이 있는 것도 그 때문입니다.

reverse

direction이 고른 축을 따라 children을 반대로 흐르게 하며, 모든 breakpoint에 한 번에 적용됩니다. 시각적 순서만 바꾸므로 screen reader가 읽는 순서와 tab 순서는 여전히 DOM 순서입니다. 순서 자체가 의미를 지닌 줄을 뒤집으면 둘이 어긋납니다.

<Flex direction="vertical" reverse>
  <Newest />
  <Oldest />
</Flex>

접근성

• 이 상자는 role도 이름도 더하지 않습니다. <nav>나 <ul>이어야 한다면 render를 쓰세요. 의미를 지니는 것은 태그입니다.
• reverse와, children을 옮기는 justifyContent 값들은 보이는 것을 바꿀 뿐 읽히는 것을 바꾸지 않습니다. 순서가 중요하다면 읽혀야 하는 순서대로 children을 두세요.