← Back

Flex Layout

[intermediate]

flex_wrap, align_content, gap, and flex: 1 growth, with min-content flooring

Flex Layout Demo

flex_wrap, align_content, gap, and flex: 1 growth, with min-content flooring

For the full interactive experience:

$ mix raxol.playground

Code
wrap = Enum.at(@wraps, model.wrap_index)
align = Enum.at(@aligns, model.align_index)
gap = Enum.at(@gaps, model.gap_index)

items = Enum.map(@items, &item_box(&1, model.grow?))

container =
  box style: %{
        border: :single,
        width: @container_width,
        height: @container_height
      } do
    row style: %{flex_wrap: wrap, align_content: align, gap: gap} do
      items
    end
  end
demo j/k prev/next / focus demo esc back 37/42 demos