-
Book Overview & Buying
-
Table Of Contents
-
Feedback & Rating

Mastering CSS
By :

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:
First up is justify-content
, which is a flex container property that determines whether the content is justified - or positioned - at the start of the main axis, the end of the main axis, or somewhere in between. Let's add justify-content
and set it to flex-start
, as shown in the following code snippet:
.flex-container {
margin-top: 200px;
display: flex;
justify-content: flex-start;
}
flex...