1. Home
  2. Components
  3. Layout
  4. Flex
Getting StartedIntroduction SOONInstallation SOONChange log SOONRoadmap SOON
Components
Layout
ContainerFlex SOONGrid SOONSticky SOONSeparator SOONAspect Ratio SOONVisually Hidden SOON
Overlays
DialogPopover SOONTooltipDropdown Menu SOONContext Menu SOONHover Card SOON
Navigation
Link SOONNavigation Menu SOONBreadcrumbs SOONPagination SOONStepper SOON
Disclosure
Collapsible SOONAccordion SOONTabs SOON
Typography
H1 SOONH2 SOONH3 SOONH4 SOONH5 SOONH6 SOONP SOONSpan SOONEm SOONI SOONStrong SOONB SOONQ SOONBlockquote SOONUl SOONOl SOONKbd SOONCode SOONTable of Contents SOON
Media
Icon SOONAvatar SOONAvatar Group SOONImage SOONVideo SOON
Notifications
Notification SOONNotification Panel SOONToast SOONAlert SOON
Status
Spinner SOONProgress Bar SOON
Buttons
Button SOONBurger Button SOONButton Group SOON
Data Display
Article Preview SOONBadge SOONCard SOONCommand Line SOONTable SOONTag SOONTag Group SOONTag Picker SOONTestimonial SOONProduct Tile SOONSkeleton SOONStatistic SOON
Data Entry
Address Input SOONCheckbox SOONCalendar Input SOONCalendar Range Input SOONColor Picker SOONCurrency Input SOONCredit Card Input SOONDate Input SOONDate Picker SOONDate Range Input SOONDate Range Picker SOONFieldset SOONFile Input SOONFile Dropzone SOONFile Picker SOONLabel SOONPin Input SOONPhone Number Input SOONRadio Button SOONRadio Group SOONRange Slider SOONRating SOONSearch Input SOONSwitch SOONSegmented Control SOONSelect SOONSlider SOONText Input SOONTextarea SOONToggle SOONToggle Group SOONURL Input SOON
Forms
TBD SOON

Flex

Component for creating unidimensional layouts.

Features

Accessibility

Changing visual order creates a disconnect between content and presentation and is, therefore, bad for accessibility. For this reason, the flex-direction: row-reverse and flex-direction: column-reverse options are omitted.

Parts and their API

Flex

Component for creating unidimensional layouts.

Props

PropTypeDefaultDescription
justify'start' | 'center' | 'end' | 'between''start'The alignment of items along the main axis.
items'start' | 'center' | 'end' | 'stretch''start'The alignment of items along the cross axis.
gap0 to 200The gap between items.
orientation'horizontal' | 'vertical''horizontal'The orientation of the layout.
inlinebooleanfalseWhether the flex layout is inline or not.
wrapbooleanfalseWhether items should wrap to multiple lines.

Wrap

Flexbox loses a lot of its power if you make it wrap. If you need to wrap, you should probably use a grid instead.

Notes

If you set <Flex inline />, the div has the least width possible, so the justify prop has no meaning because the items won't have any extra horizontal space for the justify option to matter.

If you set <Flex items="stretch" /> and the children have a fixed height, items="stretch" will be ignored.

Usage

FlexExample.tsx
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
<Flex inline gap="6" className="mt-4 rounded-md bg-slate-200 p-4">
	<div className="h-10 w-10 rounded-sm bg-slate-600" />
	<div className="h-10 w-10 rounded-sm bg-slate-600" />
	<div className="h-10 w-10 rounded-sm bg-slate-600" />
	<div className="h-10 w-10 rounded-sm bg-slate-600" />
	<div className="h-10 w-10 rounded-sm bg-slate-600" />
</Flex>
<Flex gap="6" className="mt-4 rounded-md bg-slate-200 p-4">
	<div className="h-10 w-10 rounded-sm bg-slate-600" />
	<div className="h-10 w-10 rounded-sm bg-slate-600" />
	<div className="h-10 w-10 rounded-sm bg-slate-600" />
	<div className="h-10 w-10 rounded-sm bg-slate-600" />
	<div className="h-10 w-10 rounded-sm bg-slate-600" />
</Flex>
<Flex justify="center" gap="6" className="mt-4 rounded-md bg-slate-200 p-4">
	<div className="h-10 w-10 rounded-sm bg-slate-600" />
	<div className="h-10 w-10 rounded-sm bg-slate-600" />
	<div className="h-10 w-10 rounded-sm bg-slate-600" />
	<div className="h-10 w-10 rounded-sm bg-slate-600" />
	<div className="h-10 w-10 rounded-sm bg-slate-600" />
</Flex>
<Flex justify="end" gap="6" className="mt-4 rounded-md bg-slate-200 p-4">
	<div className="h-10 w-10 rounded-sm bg-slate-600" />
	<div className="h-10 w-10 rounded-sm bg-slate-600" />
	<div className="h-10 w-10 rounded-sm bg-slate-600" />
	<div className="h-10 w-10 rounded-sm bg-slate-600" />
	<div className="h-10 w-10 rounded-sm bg-slate-600" />
</Flex>
<Flex justify="between" gap="6" className="mt-4 rounded-md bg-slate-200 p-4">
	<div className="h-10 w-10 rounded-sm bg-slate-600" />
	<div className="h-10 w-10 rounded-sm bg-slate-600" />
	<div className="h-10 w-10 rounded-sm bg-slate-600" />
	<div className="h-10 w-10 rounded-sm bg-slate-600" />
	<div className="h-10 w-10 rounded-sm bg-slate-600" />
</Flex>
<Flex gap="6" className="mt-4 h-32 rounded-md bg-slate-200 p-4">
	<div className="h-10 w-10 rounded-sm bg-slate-600" />
	<div className="h-10 w-10 rounded-sm bg-slate-600" />
	<div className="h-10 w-10 rounded-sm bg-slate-600" />
	<div className="h-10 w-10 rounded-sm bg-slate-600" />
	<div className="h-10 w-10 rounded-sm bg-slate-600" />
</Flex>
<Flex items="center" gap="6" className="mt-4 h-32 rounded-md bg-slate-200 p-4">
	<div className="h-10 w-10 rounded-sm bg-slate-600" />
	<div className="h-10 w-10 rounded-sm bg-slate-600" />
	<div className="h-10 w-10 rounded-sm bg-slate-600" />
	<div className="h-10 w-10 rounded-sm bg-slate-600" />
	<div className="h-10 w-10 rounded-sm bg-slate-600" />
</Flex>
<Flex items="end" gap="6" className="mt-4 h-32 rounded-md bg-slate-200 p-4">
	<div className="h-10 w-10 rounded-sm bg-slate-600" />
	<div className="h-10 w-10 rounded-sm bg-slate-600" />
	<div className="h-10 w-10 rounded-sm bg-slate-600" />
	<div className="h-10 w-10 rounded-sm bg-slate-600" />
	<div className="h-10 w-10 rounded-sm bg-slate-600" />
</Flex>
<Flex items="stretch" gap="6" className="mt-4 h-32 rounded-md bg-slate-200 p-4">
	<div className="w-10 rounded-sm bg-slate-600" />
	<div className="w-10 rounded-sm bg-slate-600" />
	<div className="w-10 rounded-sm bg-slate-600" />
	<div className="w-10 rounded-sm bg-slate-600" />
	<div className="w-10 rounded-sm bg-slate-600" />
</Flex>

Here's the <Flex /> component in action.

Source

Get all-access