Documentation

Lay out children in a column. See col

el ~ flexCol $ do
   el "Top"
   el " - " ~ grow
   el "Bottom"

Lay out children in a row. See row

el ~ flexRow $ do
   el "Left"
   el " - " ~ grow
   el "Right"

Grow to fill the available space in the parent flexRow or flexCol

Stack children on top of each other as layers. Each layer has the full width. See popup

el ~ stack $ do
  el "Background"
  el ~ bg Black . opacity 0.5 $ "Overlay"

Place an element above others, out of the flow of the page

el ~ stack $ do
  input @ value "Autocomplete Box"
  el ~ popup (TL 10 10) $ do
    el "Item 1"
    el "Item 2"
    el "Item 3"
el "This would be covered by the menu"

Set top, bottom, right, and left all at once

Set the flex-wrap

el ~ flexWrap WrapReverse $ do
  el "one"
  el "two"
  el "three"
el ~ flexWrap Wrap $ do
  el "one"
  el "two"
  el "three"

position:absolute, relative, etc. See stack and popup for a higher-level interface

tag "nav" ~ position Fixed . height 100 $ "Navigation bar"
tag "div" ~ flexCol . margin (T 100) $ "Main Content"

Set container display

el ~ (display None) $ "none"
el ~ (display Block) $ "block"

Set to specific width

el ~ width 100 $ "100px"
el ~ width (PxRem 100) $ "100px"
el ~ width (Pct 50) $ "50pct"

Allow width to grow to contents but not shrink any smaller than value

Allow height to grow to contents but not shrink any smaller than value

Control how an element clips content that exceeds its bounds