Using the justify-content property

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-start is the default value for justify-content, so nothing changes:

flex-start positions the flex items at the start of the main axis. Remember, when flex-direction is not specified, or specified as row, the main axis runs ...

Get Mastering CSS now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.