Skip to content
Primer/ViewComponents
What's new
Design
Interface guidelinesOcticonsPresentationsCommand lineMobileDesktop
Development
CSSReactViewComponents
About
Getting started
ContributingSystem argumentsLintingMigrationStatuses
Components
AutoCompleteAutoCompleteItemAvatarAvatarStackBlankslateBorderBoxBoxBreadcrumbButtonButtonGroupButtonMarketingClipboardCopyCloseButtonCounterDetailsDropdownDropdownMenuFlashFlexFlexItemHeadingHiddenTextExpanderImageImageCropIconButtonLabelLayoutLinkLocalTimeMenuMarkdownOcticonOcticonSymbolsPopoverProgressBarSpinnerStateSubheadTabContainerTabNavTextTimeAgoTimelineItemTooltipTruncateUnderlineNav
GitHub
On this page

Flex

Deprecated
View sourceView storybook
On this page

Use Flex to make an element lay out its content using the flexbox model. Before using these utilities, you should be familiar with CSS3 Flexible Box spec. If you are not, check out MDN's guide Using CSS Flexible Boxes.

Deprecation

Use Box instead.

Before:

<%= render Primer::FlexComponent.new(justify_content: :center) %>
<%= render Primer::FlexComponent.new(inline: true) %>
<%= render Primer::FlexComponent.new(flex_wrap: true) %>
<%= render Primer::FlexComponent.new(align_items: :start) %>
<%= render Primer::FlexComponent.new(direction: :column) %>

After:

<%= render Primer::BoxComponent.new(display: :flex, justify_content: :center) %>
<%= render Primer::BoxComponent.new(display: :inline_flex) %>
<%= render Primer::BoxComponent.new(display: :flex, flex_wrap: :wrap) %>
<%= render Primer::BoxComponent.new(display: :flex, align_items: :start) %>
<%= render Primer::BoxComponent.new(display: :flex, direction: :column) %>

Arguments

NameTypeDefaultDescription
justify_contentSymbolJUSTIFY_CONTENT_DEFAULTUse this param to distribute space between and around flex items along the main axis of the container. One of nil, :center, :flex_end, :flex_start, :space_around, or :space_between.
inlineBooleanfalseDefaults to false.
flex_wrapBooleanFLEX_WRAP_DEFAULTDefaults to nil.
align_itemsSymbolALIGN_ITEMS_DEFAULTUse this param to align items on the cross axis. One of nil, :baseline, :center, :end, :start, or :stretch.
directionSymbolnilUse this param to define the orientation of the main axis (row or column). By default, flex items will display in a row. One of nil, :column, :column_reverse, :row, or :row_reverse.
system_argumentsHashN/ASystem arguments

Examples

Default

Item 1
Item 2
Item 3
<%= render(Primer::FlexComponent.new(bg: :tertiary)) do %>
  <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 1" } %>
  <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 2" } %>
  <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 3" } %>
<% end %>

Justify center

Item 1
Item 2
Item 3
<%= render(Primer::FlexComponent.new(justify_content: :center, bg: :tertiary)) do %>
  <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 1" } %>
  <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 2" } %>
  <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 3" } %>
<% end %>

Align end

Item 1
Item 2
Item 3
<%= render(Primer::FlexComponent.new(align_items: :end, bg: :tertiary)) do %>
  <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 1" } %>
  <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 2" } %>
  <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 3" } %>
<% end %>

Direction column

Item 1
Item 2
Item 3
<%= render(Primer::FlexComponent.new(direction: :column, bg: :tertiary)) do %>
  <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 1" } %>
  <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 2" } %>
  <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 3" } %>
<% end %>
Edit this page on GitHub