<%= pb_rails("title", props: {size: 4, text: "Row"}) %>
<%= 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 %>
<%= 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 %>
<%= 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 %>
<%= 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 %>
<%= 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 %>
<%= pb_rails("title", props: {size: 4, text: "Column"}) %>
<%= 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 %>
<%= 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 %>
<%= 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 %>
<%= 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 %>