Skip to Content
DocsDeveloper GuideCSS & StylingLayoutFlexbox

Flexbox Layout

Flexbox is the recommended layout system for most UIs in WebF. It provides powerful one-dimensional layout capabilities with excellent performance.

Basic Container

Column flex container with padding, margin, and border:

<div className="w-[300px] h-[200px] p-[10px] m-[15px] border-[5px] border-black flex flex-col bg-[#fafafa]">
  <div className="w-full bg-sky-200 p-[10px]">
    Text inside flex container
  </div>
</div>

Justify Content

Control main axis alignment:

space-between

<div className="flex justify-between">
  <div className="w-[60px] h-[30px] bg-blue-200 rounded p-2">A</div>
  <div className="w-[60px] h-[30px] bg-blue-300 rounded p-2">B</div>
  <div className="w-[60px] h-[30px] bg-blue-400 rounded p-2">C</div>
</div>

space-around

<div className="flex justify-around">
  <div className="w-[60px] h-[30px] bg-blue-200 rounded p-2">A</div>
  <div className="w-[60px] h-[30px] bg-blue-300 rounded p-2">B</div>
  <div className="w-[60px] h-[30px] bg-blue-400 rounded p-2">C</div>
</div>

space-evenly

<div className="flex justify-evenly">
  <div className="w-[60px] h-[30px] bg-blue-200 rounded p-2">A</div>
  <div className="w-[60px] h-[30px] bg-blue-300 rounded p-2">B</div>
  <div className="w-[60px] h-[30px] bg-blue-400 rounded p-2">C</div>
</div>

center

<div className="flex flex-row justify-center items-center w-full h-[100px] border border-black bg-white gap-3">
  <div className="w-[120px] h-[40px] bg-[#0ea5e9]" />
  <div className="w-[120px] h-[40px] bg-[#f97316]" />
</div>

Align Items

Control cross axis alignment:

stretch (default)

<div className="w-[200px] h-[200px] flex flex-row items-stretch bg-gray-600 gap-[6px] p-1">
  <div className="w-[50px] bg-blue-500 text-white flex items-center justify-center text-xs">
    no height - stretches
  </div>
  <div className="w-[50px] h-[100px] bg-red-500" />
  <div className="w-[50px] h-[50px] bg-green-500" />
</div>

Align Content

Control spacing between flex lines (with wrap):

flex-start

<div className="flex flex-wrap content-start h-[120px] gap-[6px] bg-gray-100 p-2">
  {Array.from({ length: 8 }).map((_, i) => (
    <div key={i} className="w-[60px] h-[30px] bg-blue-300 rounded flex items-center justify-center">
      {i + 1}
    </div>
  ))}
</div>

center

<div className="flex flex-wrap content-center h-[120px] gap-[6px] bg-gray-100 p-2">
  {Array.from({ length: 8 }).map((_, i) => (
    <div key={i} className="w-[60px] h-[30px] bg-blue-300 rounded flex items-center justify-center">
      {i + 1}
    </div>
  ))}
</div>

space-between

<div className="flex flex-wrap content-between h-[120px] gap-[6px] bg-gray-100 p-2">
  {Array.from({ length: 8 }).map((_, i) => (
    <div key={i} className="w-[60px] h-[30px] bg-blue-300 rounded flex items-center justify-center">
      {i + 1}
    </div>
  ))}
</div>

Align Self

Individual items can override container alignment:

<div className="flex items-start h-[100px] gap-2 bg-gray-100 p-2">
  <div className="w-[60px] h-[30px] bg-blue-200 rounded flex items-center justify-center text-xs">
    start (inherited)
  </div>
  <div className="w-[60px] h-[30px] bg-blue-300 rounded flex items-center justify-center text-xs self-center">
    center
  </div>
  <div className="w-[60px] h-[30px] bg-blue-400 rounded flex items-center justify-center text-xs self-end">
    end
  </div>
</div>

Flex Grow and Shrink

Shrink within constrained width

<div className="flex w-[320px] gap-2">
  <div className="w-[200px] shrink h-9 bg-blue-200 rounded flex items-center justify-center text-xs">
    shrink:1, w200
  </div>
  <div className="w-[200px] shrink h-9 bg-blue-300 rounded flex items-center justify-center text-xs">
    shrink:1, w200
  </div>
</div>

Grow to fill leftover space

<div className="flex w-[420px] gap-2">
  <div className="flex-1 min-w-[60px] h-9 bg-blue-200 rounded flex items-center justify-center text-xs">
    flex:1
  </div>
  <div className="flex-[2] min-w-[60px] h-9 bg-blue-300 rounded flex items-center justify-center text-xs">
    flex:2
  </div>
  <div className="flex-[3] min-w-[60px] h-9 bg-blue-400 rounded flex items-center justify-center text-xs">
    flex:3
  </div>
</div>

Flex Basis

Fixed basis

<div className="flex w-[520px] gap-2">
  <div className="flex-[0_0_100px] h-9 bg-blue-200 rounded flex items-center justify-center text-xs">
    basis 100
  </div>
  <div className="flex-[0_0_150px] h-9 bg-blue-300 rounded flex items-center justify-center text-xs">
    basis 150
  </div>
  <div className="flex-[0_0_200px] h-9 bg-blue-400 rounded flex items-center justify-center text-xs">
    basis 200
  </div>
</div>

Basis + grow

<div className="flex w-[520px] gap-2">
  <div className="flex-[1_1_100px] h-9 bg-blue-200 rounded flex items-center justify-center text-xs">
    1 1 100
  </div>
  <div className="flex-[2_1_100px] h-9 bg-blue-300 rounded flex items-center justify-center text-xs">
    2 1 100
  </div>
  <div className="flex-[3_1_100px] h-9 bg-blue-400 rounded flex items-center justify-center text-xs">
    3 1 100
  </div>
</div>

Order

Control visual order without changing DOM:

<div className="flex gap-2">
  <div className="w-[60px] h-[30px] order-3 bg-blue-200 rounded flex items-center justify-center text-xs">
    1 (order:3)
  </div>
  <div className="w-[60px] h-[30px] order-1 bg-blue-300 rounded flex items-center justify-center text-xs">
    2 (order:1)
  </div>
  <div className="w-[60px] h-[30px] order-2 bg-blue-400 rounded flex items-center justify-center text-xs">
    3 (order:2)
  </div>
</div>

Gap

Uniform gap

<div className="flex flex-wrap gap-3 w-[320px]">
  {Array.from({ length: 6 }).map((_, i) => (
    <div key={i} className="w-[80px] h-[30px] bg-blue-300 rounded flex items-center justify-center">
      {i + 1}
    </div>
  ))}
</div>

Separate row and column gaps

<div className="flex flex-wrap gap-y-4 gap-x-[6px] w-[320px]">
  {Array.from({ length: 6 }).map((_, i) => (
    <div key={i} className="w-[80px] h-[30px] bg-blue-300 rounded flex items-center justify-center">
      {i + 1}
    </div>
  ))}
</div>

Nested Flex Containers

<div className="w-[400px] h-[300px] p-5 border-[5px] border-black flex bg-white">
  <div className="w-[80%] p-[15px] border-[3px] border-red-500 flex bg-white">
    <div className="bg-green-200 p-[10px]">
      Deeply nested content
    </div>
  </div>
</div>

Inline Flex

<div>
  <span className="inline-flex gap-[6px] p-[6px] mr-2">
    <span className="w-[40px] h-[30px] bg-blue-200 rounded flex items-center justify-center">A</span>
    <span className="w-[40px] h-[30px] bg-blue-300 rounded flex items-center justify-center">B</span>
  </span>
  <span className="inline-flex gap-[6px] p-[6px]">
    <span className="w-[40px] h-[30px] bg-blue-400 rounded flex items-center justify-center">C</span>
    <span className="w-[40px] h-[30px] bg-blue-500 rounded flex items-center justify-center">D</span>
  </span>
  Text flows around inline flex containers.
</div>

Percentage Heights

Row direction with percentage heights

<div className="flex w-[200px] h-[200px] bg-green-500 relative gap-[6px] p-1">
  <div className="h-1/2 w-[100px] bg-yellow-300" />
  <div className="h-1/2 w-full bg-blue-500 flex">
    <div className="h-full w-[100px] bg-red-500" />
  </div>
</div>

Column direction with percentage heights

<div className="flex flex-col w-[200px] h-[200px] bg-green-500 relative gap-[6px] p-1">
  <div className="h-1/2 w-[100px] bg-yellow-300" />
  <div className="h-1/2 w-full bg-blue-500 flex">
    <div className="h-full w-[100px] bg-red-500" />
  </div>
</div>

Next Steps

CSS LayoutPositioned