CSS 3 Flexbox axes

Axes in CSS flexbox can be quite the confusing subject when it comes understanding how to move items in your project. if there is not a concrete justification as to how it works, it can be difficult to understand. CSS flexbox axes works on a vertical(cross-axes) and horizontal(main-axes) when coders need to move items around in their project. The code needed to work along the main-axes is “justify-content: {direction of the content}” and the cross axes code is “align-items: { direction of content }”.

In the example below, is flex box axes in action. Let say that you have square blocks of code as your items and your trying to determine how the justify-content on the main-axes. Using the “justify-content: flex-start”, begins on the main axes at the top of the page starting with block “one”.

Lets look below at example #2, if we rewrote the code to “justify-content: center,” this would move the items down to the center of the page, off the main axis. Notice how the code is only interacting with the main-axes. That is due to the fact that “justify-content” exclusively works with the main-axes in flexbox.

The “align-items:{direction of content}” have the same concept as the justify-content property but the difference is the align-items property works on cross-axes. For example, in the display below..if you wrote the “align-items: left”, this would push the items on the screen all the way to the left end to the width box.

Here in example #2, if you were to rewrite the code above and change to “align-items: center”, this would push the items to the center of the page.

Overall the flexbox axes allows you move items using the “justify-content” (main-axes) or the “align-items” (cross-axes) property. Using these two properties can make the CSS3 experience rich when designing and creating a unique application.