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