4.5.1






Flex

Default

Row


1
2
3
4


Column


1
2
3
4

Close
<%= pb_rails("title", props: {size: 4, text: "Row"}) %><br/>

<%= pb_rails("flex") do %>
  <%= pb_rails("body", props: {classname: "flex-item"}) do %>1<% end %>
  <%= pb_rails("body", props: {classname: "flex-item"}) do %>2<% end %>
  <%= pb_rails("body", props: {classname: "flex-item"}) do %>3<% end %>
  <%= pb_rails("body", props: {classname: "flex-item"}) do %>4<% end %>
<% end %>

<br/><br/>

<%= pb_rails("title", props: {size: 4, text: "Column"}) %><br/>

<%= pb_rails("flex", props: {orientation: "column"}) do %>
  <%= pb_rails("body", props: {classname: "flex-item"}) do %>1<% end %>
  <%= pb_rails("body", props: {classname: "flex-item"}) do %>2<% end %>
  <%= pb_rails("body", props: {classname: "flex-item"}) do %>3<% end %>
  <%= pb_rails("body", props: {classname: "flex-item"}) do %>4<% end %>
<% end %>
Inline

Row


1
2
3
4


Column


1
2
3
4

Close
<%= pb_rails("title", props: {size: 4, text: "Row"}) %><br/>

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

<br/><br/>

<%= pb_rails("title", props: {size: 4, text: "Column"}) %><br/>

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

Row


1
2
3
4


Column


1
2
3
4

Close
<%= pb_rails("title", props: {size: 4, text: "Row"}) %><br/>

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

<br/><br/>

<%= pb_rails("title", props: {size: 4, text: "Column"}) %><br/>

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

Wrap


1
2
3
4
5
6
7
8
9
10


No Wrap


1
2
3
4
5
6
7
8
9
10

Close
<%= 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 %>
Spacing

None


1
2


Around


1
2


Evenly


1
2


Between


1
2

Close
<%= pb_rails("title", props: {size: 4, text: "None"}) %><br/>

<%= pb_rails("flex", props: {classname: "flex-container"}) do %>
  <%= pb_rails("flex/flex_item") do %>1<% end %>
  <%= pb_rails("flex/flex_item") do %>2<% end %>
<% end %>

<br/><br/>

<%= pb_rails("title", props: {size: 4, text: "Around"}) %><br/>

<%= pb_rails("flex", props: {classname: "flex-container", spacing: "around"}) do %>
  <%= pb_rails("flex/flex_item") do %>1<% end %>
  <%= pb_rails("flex/flex_item") do %>2<% end %>
<% end %>

<br/><br/>

<%= pb_rails("title", props: {size: 4, text: "Evenly"}) %><br/>

<%= pb_rails("flex", props: {classname: "flex-container", spacing: "evenly"}) do %>
  <%= pb_rails("flex/flex_item") do %>1<% end %>
  <%= pb_rails("flex/flex_item") do %>2<% end %>
<% end %>

<br/><br/>

<%= pb_rails("title", props: {size: 4, text: "Between"}) %><br/>

<%= pb_rails("flex", props: {classname: "flex-container", spacing: "between"}) do %>
  <%= pb_rails("flex/flex_item") do %>1<% end %>
  <%= pb_rails("flex/flex_item") do %>2<% end %>
<% end %>
Horizontal Alignment

Row


1
2
3
4


1
2
3
4


1
2
3
4


Column


1
2
3
4


1
2
3
4


1
2
3
4


1
2
3
4

Close
<%= pb_rails("title", props: {size: 4, text: "Row"}) %><br/>

<%= pb_rails("flex", props: {horizontal: "left"}) 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 %>

<br/><br/>

<%= pb_rails("flex", props: {horizontal: "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 %>

<br/><br/>

<%= pb_rails("flex", props: {horizontal: "right"}) 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 %>

<br/><br/>

<%= pb_rails("title", props: {size: 4, text: "Column"}) %><br/>

<%= pb_rails("flex", props: {orientation: "column", horizontal: "left"}) 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 %>

<br/><br/>

<%= pb_rails("flex", props: {orientation: "column", horizontal: "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 %>

<br/><br/>

<%= pb_rails("flex", props: {orientation: "column", horizontal: "right"}) 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 %>

<br/><br/>

<%= pb_rails("flex", props: {orientation: "column", horizontal: "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 %>
Vertical Alignment

Row


1
2
3
4


1
2
3
4


1
2
3
4


1
2
3
4


Column


1
2
3
4


1
2
3
4


1
2
3
4

Close
<%= pb_rails("title", props: {size: 4, text: "Row"}) %><br/>

<%= pb_rails("flex", props: {classname: "tall", vertical: "top"}) 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 %>

<br/><br/>

<%= pb_rails("flex", props: {classname: "tall", vertical: "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 %>

<br/><br/>

<%= pb_rails("flex", props: {classname: "tall", vertical: "bottom"}) 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 %>

<br/><br/>

<%= pb_rails("flex", props: {classname: "tall", vertical: "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 %>

<br/><br/>

<%= pb_rails("title", props: {size: 4, text: "Column"}) %><br/>

<%= pb_rails("flex", props: {classname: "tall", orientation: "column", vertical: "top"}) 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 %>

<br/><br/>

<%= pb_rails("flex", props: {classname: "tall", orientation: "column", vertical: "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 %>

<br/><br/>

<%= pb_rails("flex", props: {classname: "tall", orientation: "column", vertical: "bottom"}) 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 %>

Available Props
id
data
classname
aria
children
horizontal
inline
orientation
spacing
reverse
vertical
wrap