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 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.