place-content — Flexbox Alignment

CSS Flexbox Alignment: place-content Property

Notice: Except for the center center value of the place-content property,
everything will not display for both in row and column.

.content1 {
    display: flex;
    flex-wrap: wrap;
    place-content: flex-start flex-start;
}
/* default */

.item1

.item2

.item3

.item4

.content2 {
    display: flex;
    flex-wrap: wrap;
    place-content: flex-end flex-end;
}

.item1

.item2

.item3

.item4

.content3 {
    display: flex;
    flex-wrap: wrap;
    place-content: center center;
}

.item1

.item2

.item3

.item4

.content4 {
    display: flex;
    flex-wrap: wrap;
    place-content: space-between space-between;
}

.item1

.item2

.item3

.item4

.content5 {
    display: flex;
    flex-wrap: wrap;
    place-content: space-around space-around;
}

.item1

.item2

.item3

.item4

.content6 {
    display: flex;
    flex-wrap: wrap;
    place-content: space-evenly space-evenly;
}

.item1

.item2

.item3

.item4