This section is on more layout and more positioning with flexbox. Here, we'll check out a new property, justify-content, as well as how to nest flexboxes within each other, and finally using automatic margins.
Before we get started, let's reset some of our flex properties by getting rid of our flex shorthand:
.flex-container {
margin-top: 200px;
display: flex;
}
.flex-item {
padding: 20px;
}
.flex-item2 {
}
By removing the flex shorthand, each flex item stops worrying about growing, shrinking, or what their initial main size should be: