Of course, you can change the direction as you like.

Flexbox works with two axes, the main axis (which follows a horizontal, left-to-right direction as default), and the cross axis (vertical, top-to-bottom direction as default). Containers and items have properties of their own, and rules defined for items can override the rules defined for the container. The flex container is defined by the display: flex rule, it can be any element and it gives flexbox properties to its children, which are called items. Next, I will show you the main concepts of this layout. Fortunately for us, CSS3 introduced a new feature to deal with elements of dynamic content and display them in a clear way that works in every case.įlexbox allows us to distribute space for elements in a container based on several options, so we can align, change size, direction and even order of the elements as we like. Before CSS3, these kind of tasks were done in a hacky, unclear way and didn’t always worked well in all situations.

As front-end developers we usually need to align vertically any type of content, or to define a grid with equal-height columns, to say the least.

Css flex justify