CSS flexbox makes it easier to design responsive websites.
The div above uses flexbox layout and a directive to wrap its contents (flexbox-wrap: wrap).
#divflexcontainer1 {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 3em 3em 1em;
padding: 1em;
border: solid .1em purple;
border-radius: 7px;
}
This one has its items shrink in size (those that are flexible) rather than wrap around. This is the default behaviour.
#divflexcontainer2 {
display: flex;
justify-content: center;
margin: 3em 3em 1em;
padding: 1em;
border: solid .1em green;
border-radius: 7px;
}
flexbox using column layout - vertical alignment of elements.
#divflexcontainer3 {
display: flex;
flex-direction: column;
flexbox-wrap: wrap;
justify-content: center;
align-content: center;
margin: 3em 3em 1em;
padding: 1em;
border: solid .1em yellow;
border-radius: 7px;
}