CSS 29 💻 align-content and align-self properties

a - align-content property

    align-content controls the alignment of flex items along the cross axis
    It applies to the container itself and not on individual items
    values → start, center, end, flex-start, flex-end, baseline...
    ...space-between, space-around, space-evenly, stretch...
    ... safe center and unsafe center
    align-content: stretch;  → default value, fills the container along the cross axis
    align-content: flex-start; → to the cross-axis start side
    align-content: center; → close to each other in the center of the container


b - align-self property

    align-self sets individually the alignment of  a flex item along the cross axis
    values → start, center, end, flex-start, flex-end, anchor-center baseline...
    ...space-between, space-around, space-evenly, stretch...
    ... safe center and unsafe center
    align-self: stretch; → Stretch 'auto'-sized items to fit the container
    align-self: flex-end; → Put the flex item at the end
    align-self: center; → Puts the item around the center
    align-self: baseline; →aligns to the alignment baseline

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!