Skip to content

Flex

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) %>

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 %>

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, :flex_start, :flex_end, :center, :space_between, or :space_around.
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, :start, :end, :center, :baseline, 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