zgy/zhaoguiyang.site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
zhaoguiyang.site/.agents/skills/tailwindcss/references/layout-flexbox.md
zguiyang bbb2f41591 feat: add new OpenSpec skills for change management and onboarding 
- Created `openspec-ff-change` skill for fast-forward artifact creation.
- Introduced `openspec-new-change` skill for structured change creation.
- Developed `openspec-onboard` skill for guided onboarding through OpenSpec workflow.
- Added `openspec-sync-specs` skill for syncing delta specs to main specs.
- Implemented `openspec-verify-change` skill for verifying implementation against change artifacts.
- Updated `.gitignore` to exclude OpenSpec generated files.
- Added `skills-lock.json` to manage skill dependencies.
2026-03-13 13:18:03 +08:00

3.0 KiB
Raw Permalink Blame History

name, description
name description
layout-flexbox Flexbox layout utilities including flex-direction, justify, items, gap, grow, shrink, and wrap

Flexbox

Utilities for building flex layouts: direction, alignment, gap, and item sizing.

Usage

Flex direction and wrap

<div class="flex flex-row">Horizontal (default)</div>
<div class="flex flex-row-reverse">Reversed</div>
<div class="flex flex-col">Vertical</div>
<div class="flex flex-col-reverse">Vertical reversed</div>

<div class="flex flex-wrap">Wrap when needed</div>
<div class="flex flex-nowrap">No wrap (default)</div>
<div class="flex flex-wrap-reverse">Wrap reversed</div>

Justify content

<div class="flex justify-start">Start</div>
<div class="flex justify-end">End</div>
<div class="flex justify-center">Center</div>
<div class="flex justify-between">Space between</div>
<div class="flex justify-around">Space around</div>
<div class="flex justify-evenly">Space evenly</div>

Align items

<div class="flex items-start">Align start</div>
<div class="flex items-end">Align end</div>
<div class="flex items-center">Center (common)</div>
<div class="flex items-baseline">Baseline</div>
<div class="flex items-stretch">Stretch (default)</div>

Align self (on flex children)

<div class="flex">
  <div class="self-auto">Auto</div>
  <div class="self-start">Start</div>
  <div class="self-center">Center</div>
  <div class="self-stretch">Stretch</div>
</div>

Gap

<div class="flex gap-4">gap-4 (1rem)</div>
<div class="flex gap-x-2 gap-y-4">Different x/y gap</div>
<div class="flex gap-0">No gap</div>

Flex grow, shrink, basis

<div class="flex">
  <div class="w-14 flex-none">Fixed</div>
  <div class="flex-1">Grows and shrinks</div>
  <div class="flex-initial">Shrink only</div>
  <div class="flex-auto">Grow/shrink with initial size</div>
</div>
  • flex-1 = flex: 1 1 0% - equal distribution
  • flex-initial = flex: 0 1 auto - shrink, don't grow
  • flex-auto = flex: 1 1 auto - grow/shrink from content size
  • flex-none = flex: none - no grow or shrink

Order

<div class="flex">
  <div class="order-2">Second</div>
  <div class="order-1">First</div>
  <div class="order-last">Last</div>
</div>

Key Points

  • Use flex or inline-flex as container (see layout-display)
  • Direction: flex-row, flex-col, flex-row-reverse, flex-col-reverse
  • Justify: justify-start, justify-center, justify-between, justify-evenly
  • Align: items-center, items-start, items-stretch
  • Gap: gap-{n}, gap-x-{n}, gap-y-{n} (spacing scale)
  • Item sizing: flex-1, flex-none, flex-auto, flex-initial
  • Self alignment: self-center, self-start, etc.
  • Order: order-{n}, order-first, order-last