More layout, more positioning

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:

Get Mastering CSS now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.