CSS Cheat Sheet
# CSS Cheat Sheet
## Flexbox
```css
.container { display: flex; justify-content: center; align-items: center; }
.container { flex-direction: row | column; flex-wrap: wrap; gap: 1rem; }
.item { flex: 1; flex-grow: 1; flex-shrink: 0; flex-basis: auto; }
```
## Grid
```css
.container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.item { grid-column: span 2; grid-row: span 1; }
```
## Units
- px — Fixed pixels
- em — Parent font size
- rem — Root font size
- vw/vh — Viewport width/height
- % — Percentage of parent
- fr — Fraction of available space
## Selectors
```css
.class { } # Class
#id { } # ID
element { } # Type
a, b { } # Group
a > b { } # Child
a + b { } # Adjacent sibling
a ~ b { } # General sibling
[href] { } # Attribute
```
## Variables
```css
:root { --brand: #14b8a6; }
.el { color: var(--brand); }
```
## Transitions & Animations
```css
.el { transition: all 0.3s ease; }
.el:hover { transform: scale(1.05); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
```
## Media Queries
```css
@media (max-width: 768px) { /* mobile */ }
@media (min-width: 1024px) { /* desktop */ }
```