<%= pb_rails("title", props: {size: 4, text: "Display Flex"}) %>
<%= 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 %>
<%= 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 %>
<%= pb_rails("title", props: {size: 4, text: "Shrink"}) %>
<%= 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 %>
<%= pb_rails("title", props: {size: 4, text: "Fixed Size"}) %>
<%= 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 %>
<%= pb_rails("title", props: {size: 4, text: "Flex"}) %>
<%= 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 %>
<%= pb_rails("title", props: {size: 4, text: "Order"}) %>
<%= 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 %>