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