This kit is used to build most of the complex interfaces. The Flex Kit is used the same way flex box is used.
orientation
| Type: String | Values: row | column <%= pb_rails("title", props: {size: 4, text: "Row"}) %> <br/> <div class="flex-doc-example"> <%= pb_rails("flex") do %> <%= pb_rails("flex/flex_item") do %>1<% end %> <%= pb_rails("flex/flex_item") do %>2<% end %> <%= pb_rails("flex/flex_item") do %>3<% end %> <%= pb_rails("flex/flex_item") do %>4<% end %> <% end %> </div> <br/><br/> <%= pb_rails("title", props: {size: 4, text: "Column"}) %> <br/> <div class="flex-doc-example"> <%= pb_rails("flex", props: {orientation: "column"}) do %> <%= pb_rails("flex/flex_item") do %>1<% end %> <%= pb_rails("flex/flex_item") do %>2<% end %> <%= pb_rails("flex/flex_item") do %>3<% end %> <%= pb_rails("flex/flex_item") do %>4<% end %> <% end %> </div>
inline
| Type: Boolean
By default this prop is false
which sets the flex container to take up the full width of its parent container. When the prop is set to true
the flex container sets its width to be the same size as the containing items.
<%= pb_rails("title", props: {size: 4, text: "Row"}) %> <br/> <div class="flex-doc-example"> <%= pb_rails("flex", props: {inline: true}) do %> <%= pb_rails("flex/flex_item") do %>1<% end %> <%= pb_rails("flex/flex_item") do %>2<% end %> <%= pb_rails("flex/flex_item") do %>3<% end %> <%= pb_rails("flex/flex_item") do %>4<% end %> <% end %> </div> <br/><br/> <%= pb_rails("title", props: {size: 4, text: "Column"}) %> <br/> <div class="flex-doc-example"> <%= pb_rails("flex", props: {orientation: "column", inline:true}) do %> <%= pb_rails("flex/flex_item") do %>1<% end %> <%= pb_rails("flex/flex_item") do %>2<% end %> <%= pb_rails("flex/flex_item") do %>3<% end %> <%= pb_rails("flex/flex_item") do %>4<% end %> <% end %> </div>
reverse
| Type: Boolean
When set to true
this prop will reverse the order of items in the flex container.
<%= pb_rails("title", props: {size: 4, text: "Row"}) %> <br/> <div class="flex-doc-example"> <%= pb_rails("flex",props:{reverse: true}) do %> <%= pb_rails("flex/flex_item") do %>1<% end %> <%= pb_rails("flex/flex_item") do %>2<% end %> <%= pb_rails("flex/flex_item") do %>3<% end %> <%= pb_rails("flex/flex_item") do %>4<% end %> <% end %> </div> <br/><br/> <%= pb_rails("title", props: {size: 4, text: "Column"}) %> <br/> <div class="flex-doc-example"> <%= pb_rails("flex", props: {orientation: "column" , reverse: true}) do %> <%= pb_rails("flex/flex_item") do %>1<% end %> <%= pb_rails("flex/flex_item") do %>2<% end %> <%= pb_rails("flex/flex_item") do %>3<% end %> <%= pb_rails("flex/flex_item") do %>4<% end %> <% end %> </div>
wrap
| Type: Boolean
When set to true
this prop will move the next item in flex container to a new line if there is no more room.
<div class="flex-doc-example"> <%= pb_rails("title", props: {size: 4, text: "Wrap"}) %><br/> <%= pb_rails("flex", props: {wrap: true}) do %> <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>1<% end %> <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>2<% end %> <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>3<% end %> <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>4<% end %> <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>5<% end %> <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>6<% end %> <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>7<% end %> <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>8<% end %> <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>9<% end %> <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>10<% end %> <% end %> <br/><br/> <%= pb_rails("title", props: {size: 4, text: "No Wrap"}) %><br/> <%= pb_rails("flex") do %> <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>1<% end %> <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>2<% end %> <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>3<% end %> <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>4<% end %> <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>5<% end %> <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>6<% end %> <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>7<% end %> <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>8<% end %> <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>9<% end %> <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>10<% end %> <% end %> </div>
justify
| Type: String | Values: none | around | evenly | between
<%= pb_rails("title", props: {size: 4, text: "None"}) %><br/> <div class="flex-doc-example"> <%= pb_rails("flex") do %> <%= pb_rails("flex/flex_item") do %>1<% end %> <%= pb_rails("flex/flex_item") do %>2<% end %> <%= pb_rails("flex/flex_item") do %>3<% end %> <%= pb_rails("flex/flex_item") do %>4<% end %> <% end %> </div> <br/><br/> <%= pb_rails("title", props: {size: 4, text: "Around"}) %><br/> <div class="flex-doc-example"> <%= pb_rails("flex", props:{justify: "around" }) do %> <%= pb_rails("flex/flex_item") do %>1<% end %> <%= pb_rails("flex/flex_item") do %>2<% end %> <%= pb_rails("flex/flex_item") do %>3<% end %> <%= pb_rails("flex/flex_item") do %>4<% end %> <% end %> </div> <br/><br/> <%= pb_rails("title", props: {size: 4, text: "Evenly"}) %><br/> <div class="flex-doc-example"> <%= pb_rails("flex", props:{justify: "evenly" }) do %> <%= pb_rails("flex/flex_item") do %>1<% end %> <%= pb_rails("flex/flex_item") do %>2<% end %> <%= pb_rails("flex/flex_item") do %>3<% end %> <%= pb_rails("flex/flex_item") do %>4<% end %> <% end %> </div> <br/><br/> <%= pb_rails("title", props: {size: 4, text: "Between"}) %><br/> <div class="flex-doc-example"> <%= pb_rails("flex", props:{justify: "between" }) do %> <%= pb_rails("flex/flex_item") do %>1<% end %> <%= pb_rails("flex/flex_item") do %>2<% end %> <%= pb_rails("flex/flex_item") do %>3<% end %> <%= pb_rails("flex/flex_item") do %>4<% end %> <% end %> </div> </div>
justify
| Type: String | Values: start | center | end | | none
<%= pb_rails("title", props: {size: 4, text: "Row"}) %><br/> <div class="flex-doc-example"> <%= pb_rails("flex", props:{justify: "start" }) do %> <%= pb_rails("flex/flex_item") do %>1<% end %> <%= pb_rails("flex/flex_item") do %>2<% end %> <%= pb_rails("flex/flex_item") do %>3<% end %> <%= pb_rails("flex/flex_item") do %>4<% end %> <% end %> </div> <br/><br/> <div class="flex-doc-example"> <%= pb_rails("flex", props:{justify: "center" }) do %> <%= pb_rails("flex/flex_item") do %>1<% end %> <%= pb_rails("flex/flex_item") do %>2<% end %> <%= pb_rails("flex/flex_item") do %>3<% end %> <%= pb_rails("flex/flex_item") do %>4<% end %> <% end %> </div> <br/><br/> <div class="flex-doc-example"> <%= pb_rails("flex", props:{justify: "end" }) do %> <%= pb_rails("flex/flex_item") do %>1<% end %> <%= pb_rails("flex/flex_item") do %>2<% end %> <%= pb_rails("flex/flex_item") do %>3<% end %> <%= pb_rails("flex/flex_item") do %>4<% end %> <% end %> </div> <br/><br/> <%= pb_rails("title", props: {size: 4, text: "Column"}) %><br/> <div class="flex-doc-example tall"> <%= pb_rails("flex", props:{ justify: "start", orientation: "column" }) do %> <%= pb_rails("flex/flex_item") do %>1<% end %> <%= pb_rails("flex/flex_item") do %>2<% end %> <%= pb_rails("flex/flex_item") do %>3<% end %> <%= pb_rails("flex/flex_item") do %>4<% end %> <% end %> </div> <br/><br/> <div class="flex-doc-example tall"> <%= pb_rails("flex", props:{justify: "center", orientation: "column" }) do %> <%= pb_rails("flex/flex_item") do %>1<% end %> <%= pb_rails("flex/flex_item") do %>2<% end %> <%= pb_rails("flex/flex_item") do %>3<% end %> <%= pb_rails("flex/flex_item") do %>4<% end %> <% end %> </div> <br/><br/> <div class="flex-doc-example tall"> <%= pb_rails("flex", props:{ justify: "end", orientation: "column" }) do %> <%= pb_rails("flex/flex_item") do %>1<% end %> <%= pb_rails("flex/flex_item") do %>2<% end %> <%= pb_rails("flex/flex_item") do %>3<% end %> <%= pb_rails("flex/flex_item") do %>4<% end %> <% end %> </div>
align
| Type: String | Values: start | center | end | stretch | baseline | none
<%= pb_rails("title", props: {size: 4, text: "Row"}) %><br/> <div class="flex-doc-example"> <%= pb_rails("flex", props:{ align: "start" }) do %> <%= pb_rails("flex/flex_item") do %>1<% end %> <%= pb_rails("flex/flex_item", props:{padding:"none"}) do %>2<% end %> <%= pb_rails("flex/flex_item", props:{padding:"xl"}) do %>3<% end %> <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>4<% end %> <% end %> </div> <br/><br/> <div class="flex-doc-example"> <%= pb_rails("flex", props:{ align: "center" }) do %> <%= pb_rails("flex/flex_item") do %>1<% end %> <%= pb_rails("flex/flex_item", props:{padding:"none"}) do %>2<% end %> <%= pb_rails("flex/flex_item", props:{padding:"xl"}) do %>3<% end %> <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>4<% end %> <% end %> </div> <br/><br/> <div class="flex-doc-example"> <%= pb_rails("flex", props:{ align: "end" }) do %> <%= pb_rails("flex/flex_item") do %>1<% end %> <%= pb_rails("flex/flex_item", props:{padding:"none"}) do %>2<% end %> <%= pb_rails("flex/flex_item", props:{padding:"xl"}) do %>3<% end %> <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>4<% end %> <% end %> </div> <br/><br/> <div class="flex-doc-example"> <%= pb_rails("flex", props:{ align: "baseline" }) do %> <%= pb_rails("flex/flex_item") do %>1<% end %> <%= pb_rails("flex/flex_item", props:{padding:"none"}) do %>2<% end %> <%= pb_rails("flex/flex_item", props:{padding:"xl"}) do %>3<% end %> <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>4<% end %> <% end %> </div> <br/><br/> <div class="flex-doc-example"> <%= pb_rails("flex", props:{ align: "stretch" }) do %> <%= pb_rails("flex/flex_item") do %>1<% end %> <%= pb_rails("flex/flex_item", props:{padding:"none"}) do %>2<% end %> <%= pb_rails("flex/flex_item", props:{padding:"xl"}) do %>3<% end %> <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>4<% end %> <% end %> </div> <br/><br/> <%= pb_rails("title", props: {size: 4, text: "Column"}) %><br/> <div class="flex-doc-example"> <%= pb_rails("flex", props:{orientation: "column", align: "start" }) do %> <%= pb_rails("flex/flex_item") do %>1<% end %> <%= pb_rails("flex/flex_item") do %>2<% end %> <%= pb_rails("flex/flex_item") do %>3<% end %> <%= pb_rails("flex/flex_item") do %>4<% end %> <% end %> </div> <br/><br/> <div class="flex-doc-example"> <%= pb_rails("flex", props:{orientation: "column", align: "center" }) do %> <%= pb_rails("flex/flex_item") do %>1<% end %> <%= pb_rails("flex/flex_item") do %>2<% end %> <%= pb_rails("flex/flex_item") do %>3<% end %> <%= pb_rails("flex/flex_item") do %>4<% end %> <% end %> </div> <br/><br/> <div class="flex-doc-example"> <%= pb_rails("flex", props:{orientation: "column", align: "end" }) do %> <%= pb_rails("flex/flex_item") do %>1<% end %> <%= pb_rails("flex/flex_item") do %>2<% end %> <%= pb_rails("flex/flex_item") do %>3<% end %> <%= pb_rails("flex/flex_item") do %>4<% end %> <% end %> </div> <br/><br/> <div class="flex-doc-example"> <%= pb_rails("flex", props:{orientation: "column", align: "stretch" }) do %> <%= pb_rails("flex/flex_item") do %>1<% end %> <%= pb_rails("flex/flex_item") do %>2<% end %> <%= pb_rails("flex/flex_item") do %>3<% end %> <%= pb_rails("flex/flex_item") do %>4<% end %> <% end %> </div>
gap
| row_gap
| rowGap
| column_gap
| columnGap
| Type: String | Values: xs | sm | md | lg | xl | none
Setting the gap prop sets the rowgap || rowGap and the columngap || columnGap props to the same size and creates equal space within a flex container.
Setting the row_gap || rowGap prop creates space between rows in a flex container.
Setting the column_gap || columnGap prop creates space between columns in a flex container.
<%= pb_rails("title", props: {size: 4, text: "Row"}) %> <br/> <div class="flex-doc-example"> <%= pb_rails("flex", props:{ gap: "xs", wrap:true}) do %> <%40.times do |i|%> <%= pb_rails("flex/flex_item") do %> <%=i%> <% end %> <% end %> <% end %> </div> <br/><br/> <%= pb_rails("title", props: {size: 4, text: "Column Gap"}) %> <br/> <div class="flex-doc-example"> <%= pb_rails("flex", props:{ column_gap: "lg"}) do %> <%= pb_rails("flex/flex_item") do %>1<% end %> <%= pb_rails("flex/flex_item") do %>2<% end %> <%= pb_rails("flex/flex_item") do %>3<% end %> <%= pb_rails("flex/flex_item") do %>4<% end %> <% end %> </div> <br/><br/> <%= pb_rails("title", props: {size: 4, text: "Row Gap"}) %> <br/> <div class="flex-doc-example"> <%= pb_rails("flex", props:{ orientation: "column", row_gap: "xl"}) do %> <%= pb_rails("flex/flex_item") do %>1<% end %> <%= pb_rails("flex/flex_item") do %>2<% end %> <%= pb_rails("flex/flex_item") do %>3<% end %> <%= pb_rails("flex/flex_item") do %>4<% end %> <% end %> </div>
display_flex
| Type: Booleanflex
| Type: String | Values: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12fixed_size
| Type: String | Values: Any CSS px or % valuegrow
| Type: Booleanshrink
| Type: Booleanorder
| Type: String | Values: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | first
Flex is a short hand to set the flex item to take up (x) amount of available space
Setting Flex to 1 is equal to setting the grow & shrink prop to true
Setting Flex to 0 is equal to setting the grow & shrink prop to false
If grow & shrink are true, grow will take precedence an the flex item will take up as much space as possible, then if other elements are added shrink would allow other items to squish inside the flex container
display_flex will either be true or false. If true, then the class will be applied to the kit
<%= pb_rails("title", props: {size: 4, text: "Display Flex"}) %> <br/> <div class="flex-doc-example"> <%= pb_rails("flex/flex_item",props: { gap:"sm", display_flex: true }) do %> <%= pb_rails("flex/flex_item") do %>We<% end %> <%= pb_rails("flex/flex_item") do %>Are<% end %> <%= pb_rails("flex/flex_item") do %>Being<% end %> <%= pb_rails("flex/flex_item") do %>Flexed<% end %> <% end %> </div> <br/><br/> <div class="flex-doc-example"> <%= pb_rails("flex",props: { gap:"sm" }) do %> <%= pb_rails("flex/flex_item", props: { grow: true }) do %>I'm growing<% end %> <%= pb_rails("flex/flex_item") do %>1<% end %> <%= pb_rails("flex/flex_item") do %>2<% end %> <%= pb_rails("flex/flex_item") do %>3<% end %> <% end %> </div> <br/><br/> <%= pb_rails("title", props: {size: 4, text: "Shrink"}) %> <br/> <div class="flex-doc-example"> <%= pb_rails("flex", props: { gap: "sm"}) do %> <%= pb_rails("flex/flex_item", props: {shrink: true}) do %> I'm shrinking<% end %> <%= pb_rails("flex/flex_item", props: {flex: "1"}) do %>1<% end %> <%= pb_rails("flex/flex_item", props: {flex: "1"}) do %>2<% end %> <%= pb_rails("flex/flex_item", props: {flex: "1"}) do %>3<% end %> <% end %> </div> <br/><br/> <%= pb_rails("title", props: {size: 4, text: "Fixed Size"}) %> <br/> <div class="flex-doc-example"> <%= pb_rails("flex", props: { gap: "sm"}) do %> <%= pb_rails("flex/flex_item", props: {fixed_size: "250px"}) do %> I'm 250px<% end %> <%= pb_rails("flex/flex_item", props: {flex: "1"}) do %>1<% end %> <%= pb_rails("flex/flex_item", props: {flex: "1"}) do %>2<% end %> <%= pb_rails("flex/flex_item", props: {flex: "1"}) do %>3<% end %> <% end %> </div> <br/><br/> <%= pb_rails("title", props: {size: 4, text: "Flex"}) %> <br/> <div class="flex-doc-example"> <%= pb_rails("flex", props: { gap: "sm"}) do %> <%= pb_rails("flex/flex_item", props: {flex: "1"}) do %>1<% end %> <%= pb_rails("flex/flex_item", props: {flex: "3"}) do %>2<% end %> <%= pb_rails("flex/flex_item", props: {flex: "1"}) do %>3<% end %> <%= pb_rails("flex/flex_item", props: {flex: "2"}) do %>4<% end %> <% end %> </div> <br/><br/> <%= pb_rails("title", props: {size: 4, text: "Order"}) %> <br/> <div class="flex-doc-example"> <%= pb_rails("flex", props: { gap: "sm"}) do %> <%= pb_rails("flex/flex_item", props: {order: "4"}) do %>1<% end %> <%= pb_rails("flex/flex_item", props: {order: "2"}) do %>2<% end %> <%= pb_rails("flex/flex_item", props: {order: "1"}) do %>3<% end %> <%= pb_rails("flex/flex_item", props: {order: "3"}) do %>4<% end %> <% end %> </div>
align_self
| Type: String | Values: start | end | center | stretch
Align-self aligns the Flex Item on the cross axis. This prop may also be applied to the Flex kit and will act the same way.
<%= pb_rails("title", props: {size: 4, text: "Row"}) %> <br/> <div class="flex-doc-example"> <%= pb_rails("flex") do %> <%= pb_rails("flex/flex_item", props: {padding:"sm", align_self:"start"}) do %>1<% end %> <%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>2<% end %> <%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>3<% end %> <%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>4<% end %> <% end %> </div> <br/><br/> <div class="flex-doc-example"> <%= pb_rails("flex") do %> <%= pb_rails("flex/flex_item", props:{padding:"sm", align_self:"end"}) do %>1<% end %> <%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>2<% end %> <%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>3<% end %> <%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>4<% end %> <% end %> </div> <br/><br/> <div class="flex-doc-example"> <%= pb_rails("flex") do %> <%= pb_rails("flex/flex_item", props:{padding:"sm", align_self: "center"}) do %>1<% end %> <%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>2<% end %> <%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>3<% end %> <%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>4<% end %> <% end %> </div> <br/><br/> <div class="flex-doc-example"> <%= pb_rails("flex") do %> <%= pb_rails("flex/flex_item", props:{padding:"sm", align_self:"stretch"}) do %>1<% end %> <%= pb_rails("flex/flex_item", props:{padding:"md"}) do %>2<% end %> <%= pb_rails("flex/flex_item", props:{padding:"md"}) do %>3<% end %> <%= pb_rails("flex/flex_item", props:{padding:"md"}) do %>4<% end %> <% end %> </div> <br/><br/> <%= pb_rails("title", props: {size: 4, text: "Column"}) %> <br/> <div class="flex-doc-example"> <%= pb_rails("flex", props: {orientation: "column"}) do %> <%= pb_rails("flex/flex_item", props: {padding:"sm", align_self:"start"}) do %>1<% end %> <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>2<% end %> <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>3<% end %> <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>4<% end %> <% end %> </div> <br/><br/> <div class="flex-doc-example"> <%= pb_rails("flex", props: {orientation: "column"}) do %> <%= pb_rails("flex/flex_item", props:{padding:"sm", align_self: "end"}) do %>1<% end %> <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>2<% end %> <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>3<% end %> <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>4<% end %> <% end %> </div> <br/><br/> <div class="flex-doc-example"> <%= pb_rails("flex", props: {orientation: "column"}) do %> <%= pb_rails("flex/flex_item", props:{padding:"sm", align_self:"center"}) do %>1<% end %> <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>2<% end %> <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>3<% end %> <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>4<% end %> <% end %> </div> <br/><br/> <div class="flex-doc-example"> <%= pb_rails("flex", props: {orientation: "column"}) do %> <%= pb_rails("flex/flex_item", props:{padding: "sm", align_self:"stretch"}) do %>1<% end %> <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>2<% end %> <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>3<% end %> <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>4<% end %> <% end %> </div>