CSS 28 💻 justify-content and align-items properties

a - justify-content property

    justify-content specifies the alignment of extra space between the items.
    It is used for the main axis
    values → positional alignment(center, start, end, flex-start, flex-end, left and right)
    distributed alignment(space-between, space-around, space-evenly and stretch)
    overflow alignment(sace center and unsafe center)
    justify-content: space-between; → the spacing between items is the same
    justify-content: space-around; → the spacing between items is the same. The space in the beginning and at the end is the half of the space between
    justify-content: space-evenly; → the spacing between the item and in the beginning and in the end is the same
    justify-content: center; → items are centered and packed to each other


b - align-items property

    align-items specifies how items should be aligned along the cross axis
    values → basic keywords(normal, stretch)
    positional alignment(center, start, flex-start, flex-end, self-start, self-end and anchor-center)
    baseline alignment(baseline, first baseline, last baseline, safe center, unsafe center)
    align-items: baseline; → aligns to containers baseline
    align-items: end; → aligns items to the end of the container
    align-items: start; → aligns items to the start of the container
    align-items: stretch; → items enlarged to fill the container

---

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!