• English

      • Layout Class Syntax

      This page lists the current support scope of Flor's built-in layout classes. For .class(...) usage instructions, see Atomic Class Support. For general class string parsing rules, see Class Syntax Basics.

      Layout classes are uniformly parsed by Flor and available for all views. Flex, Grid, Block related classes are controlled by features.

      Value Syntax

      The * in the table below represents a value. For general value syntax, see Class Syntax Basics.

      SyntaxExampleDescription
      Bare number4Parsed according to Tailwind spacing conventions, default 4 = 16px.
      With unit[12px], [1rem], [12pt], [50vw], [50vh]Supports px, rem, pt, vw, vh.
      Percentage50%, [50%]Converted to percentage.
      Fraction1/2, 1/3Converted to percentage.
      Keywordsauto, full, screenInterpreted by specific property.

      Display

      ClassEffectfeature
      hiddenDisplay::NoneNone
      flexDisplay::Flexlayout-flex
      gridDisplay::Gridlayout-grid
      blockDisplay::Blocklayout-block

      Position

      ClassEffect
      relativePosition::Relative
      absolutePosition::Absolute

      Currently fixed and sticky are not supported.

      Box Sizing

      ClassEffect
      box-borderBoxSizing::BorderBox
      box-contentBoxSizing::ContentBox

      Z Index

      z-* is handled as layer level in .class(...) entry.

      ClassEffect
      z-autoz-index set to 0.
      z-10z-index set to 10.
      z--1z-index set to -1.

      z-* currently does not go through state prefix parsing; for example hover:z-10 is not processed as hover layer level.

      Overflow

      ClassEffect
      overflow-visiblex/y both Overflow::Visible.
      overflow-hiddenx/y both Overflow::Hidden.
      overflow-clipx/y both Overflow::Clip.
      overflow-scrollx/y both Overflow::Scroll.
      overflow-x-visible / overflow-x-hidden / overflow-x-clip / overflow-x-scrollOnly sets x direction.
      overflow-y-visible / overflow-y-hidden / overflow-y-clip / overflow-y-scrollOnly sets y direction.

      Size

      Class PatternEffectSupported Values
      w-*Widthauto, full, fit, min, max, numbers, fractions, percentages, arbitrary length values.
      h-*HeightSame as w-*.
      size-*Sets both width and heightSame as w-*.
      w-screen / h-screen / size-screenUses current window client area sizescreen.
      min-w-* / min-h-*Minimum width / minimum heightSame as w-*, also supports screen.
      max-w-* / max-h-*Maximum width / maximum heightSame as w-*, also supports screen.

      Examples:

      w-full
h-auto
w-1/2
min-w-[240px]
max-h-[80vh]
size-10

      Padding

      Class PatternEffect
      p-*Four-side padding.
      px-*Left/right padding.
      py-*Top/bottom padding.
      pl-*Left padding.
      pr-*Right padding.
      pt-*Top padding.
      pb-*Bottom padding.

      Supports numbers, percentages, fractions, full and arbitrary length values.

      p-4
px-2
pt-[10px]
pl-1/2

      Margin

      Class PatternEffect
      m-*Four-side margin.
      mx-*Left/right margin.
      my-*Top/bottom margin.
      ml-*Left margin.
      mr-*Right margin.
      mt-*Top margin.
      mb-*Bottom margin.

      Supports auto, numbers, percentages, fractions, full and arbitrary length values.

      m-4
mx-auto
mt-2
mb-[20px]

      Inset

      Inset classes are typically used with absolute or relative.

      Class PatternEffect
      inset-*Four-side offset.
      inset-x-*Left/right offset.
      inset-y-*Top/bottom offset.
      left-*Left offset.
      right-*Right offset.
      top-*Top offset.
      bottom-*Bottom offset.

      Supports auto, numbers, percentages, fractions, full and arbitrary length values.

      inset-0
top-4
left-1/2
right-[10px]

      Border Width

      Border classes here only set layout-level border thickness, not border color or corner radius.

      Class PatternEffect
      borderFour-side thickness 1px.
      border-*Four-side thickness.
      border-x-* / border-y-*Left/right / top/bottom thickness.
      border-l-* / border-r-* / border-t-* / border-b-*Single side thickness.
      border
border-2
border-b-[1px]

      Gap

      Requires layout-flex or layout-grid feature.

      Class PatternEffect
      gap-*Spacing for both directions.
      gap-x-*x direction spacing.
      gap-y-*y direction spacing.
      gap-4
gap-x-2
gap-y-[10px]

      Flex

      Requires layout-flex feature.

      ClassEffect
      flex-rowFlexDirection::Row
      flex-row-reverseFlexDirection::RowReverse
      flex-colFlexDirection::Column
      flex-col-reverseFlexDirection::ColumnReverse
      flex-wrapFlexWrap::Wrap
      flex-wrap-reverseFlexWrap::WrapReverse
      flex-nowrapFlexWrap::NoWrap
      flex-1grow: 1, shrink: 1, basis: 0%
      flex-autogrow: 1, shrink: 1, basis: auto
      flex-initialgrow: 0, shrink: 1, basis: auto
      flex-nonegrow: 0, shrink: 0, basis: auto
      growFlexGrow(1.0)
      grow-* / grow-[1.5]Custom grow value.
      shrinkFlexShrink(1.0)
      shrink-* / shrink-[0.5]Custom shrink value.
      basis-*FlexBasis, value parsed as size value.

      Flex / Grid Shared Alignment

      Requires layout-flex or layout-grid feature.

      ClassEffect
      items-startAlignItems::Start
      items-endAlignItems::End
      items-centerAlignItems::Center
      items-baselineAlignItems::Baseline
      items-stretchAlignItems::Stretch
      self-startAlignSelf::Start
      self-endAlignSelf::End
      self-centerAlignSelf::Center
      self-baselineAlignSelf::Baseline
      self-stretchAlignSelf::Stretch
      justify-startJustifyContent::Start
      justify-endJustifyContent::End
      justify-centerJustifyContent::Center
      justify-betweenJustifyContent::SpaceBetween
      justify-aroundJustifyContent::SpaceAround
      justify-evenlyJustifyContent::SpaceEvenly
      justify-stretchJustifyContent::Stretch
      content-startAlignContent::Start
      content-endAlignContent::End
      content-centerAlignContent::Center
      content-betweenAlignContent::SpaceBetween
      content-aroundAlignContent::SpaceAround
      content-evenlyAlignContent::SpaceEvenly
      content-stretchAlignContent::Stretch

      Grid

      Requires layout-grid feature.

      ClassEffect
      grid-flow-rowGridAutoFlow::Row
      grid-flow-colGridAutoFlow::Column
      grid-flow-row-denseGridAutoFlow::RowDense
      grid-flow-col-denseGridAutoFlow::ColumnDense
      row-start-* / row-end-*Sets grid row start/end lines, value is integer.
      col-start-* / col-end-*Sets grid column start/end lines, value is integer.
      row-span-*Sets row span, value is positive integer.
      col-span-*Sets column span, value is positive integer.
      justify-items-startJustifyItems::Start
      justify-items-endJustifyItems::End
      justify-items-centerJustifyItems::Center
      justify-items-stretchJustifyItems::Stretch
      justify-self-startJustifySelf::Start
      justify-self-endJustifySelf::End
      justify-self-centerJustifySelf::Center
      justify-self-stretchJustifySelf::Stretch

      Currently grid-cols-*, grid-rows-*, auto-cols-*, auto-rows-* are not supported.

      Block Text Align

      Requires layout-block feature.

      ClassEffect
      text-leftTextAlign::LegacyLeft
      text-centerTextAlign::LegacyCenter
      text-rightTextAlign::LegacyRight

      Note: These are block layout text/inline alignment classes. Specific views may also parse text-* as view style, such as text color or font size.

      Aspect Ratio

      ClassEffect
      aspect-square1:1.
      aspect-video16:9.
      aspect-[N]Custom ratio.
      aspect-[N/M]Fraction ratio.
      aspect-square
aspect-video
aspect-[4/3]

      Scrollbar Width

      Class PatternEffect
      scrollbar-*Sets ScrollbarWidth, value uses px.
      scrollbar-0
scrollbar-4
scrollbar-[10px]

      State Prefixes

      Layout classes support general state prefixes:

      p-4 hover:p-6 focus:p-8

      State prefix rules see Class Syntax Basics.

      z-* is an exception: it is handled as layer level before entering state prefix parsing, so hover:z-10 is currently not supported.

      Merge Behavior

      The same batch of classes is parsed in declaration order:

      p-4 pl-2 pt-1

      Result is left overridden by pl-2, top overridden by pt-1, other sides retain p-4.

      p-4 p-8

      Result is p-8 overriding p-4.

      Multiple calls to .class(...) create multiple layers; later created layers override previous layers on the same layout property.

      Currently Not Supported

      Here are common but currently unimplemented syntax in layout classes:

      SyntaxStatus
      fixed, stickyNot supported.
      grid-cols-*, grid-rows-*Not supported.
      auto-cols-*, auto-rows-*Not supported.
      order-*Not supported.
      place-content-*, place-items-*, place-self-*Not supported.
      space-x-*, space-y-*Not supported.
      Responsive prefixes sm:, md:, lg:Not supported.
      Negative value prefix -m-4, -top-2Not supported; use builder or supplement implementation when negative values are needed.