CodeSage / data /docs /css_flexbox.txt
Aditya
Add LLM vs RAG vs Fine-Tuning comparison project
4a3f117
Raw
History Blame Contribute Delete
881 Bytes
CSS Flexbox (Flexible Box Layout) is a layout model for arranging items in a container.
Activated by setting display: flex on a container element.
Container properties:
- flex-direction: row (default, horizontal) or column (vertical).
- justify-content: aligns items on main axis. Values: flex-start, flex-end, center, space-between, space-around.
- align-items: aligns items on cross axis. Values: stretch (default), flex-start, flex-end, center.
- flex-wrap: nowrap (default) or wrap to allow items to move to next line.
- gap: space between flex items.
Item properties:
- flex-grow: how much item grows relative to siblings. 0 means no grow.
- flex-shrink: how much item shrinks when space is limited.
- flex-basis: initial size of item before flex calculations.
- align-self: overrides align-items for a single item.
Shorthand: flex: grow shrink basis (e.g., flex: 1 1 auto)