This will set the order to 1 for the 1st element, 4th element, 7th element, etc. I’ve written another post that explains in detail how this works and why. If we want to create a masonry layout with three columns we can divide all the items into three “groups”, like so: We can combine that property with some clever use of the nth-child() selector to order items dynamically depending on their original order. Luckily, we can use the order property to change in which order elements are rendered.

If you read from left to right the elements would seem to be shuffled and appear in a seemingly random order, for example 1, 3, 6, 2, 4, 7, 8, etc. This creates a layout that looks great, and similar to the masonry effect, but it could be confusing for users it creates an unexpected ordering of elements. One of the main challenges of creating a masonry layout with flexbox is that to make an item affect the positioning of an item above and below it we need to change the flex-direction of the container to column, which makes items run from top to bottom. Flexbox might seem like a great candidate to finally create this layout with CSS only, and it’s certainly possible, but it’s surprisingly hacky. I used align-items: center, to center my child element along the cross axis, which in this case was vertical.You’ve probably seen masonry (or mosaic) layouts all over the internet, but it’s likely that they were all powered by Masonry or a similar JavaScript library. Then, I used justify-content: center to center my content along the main flex axis, in this case horizontally. I created a flex container on main, the parent element of the items that I wanted to center by adding display: flex. With just a few lines of code, I can horizontally and vertically center an element using flexbox. I'll do align-items: center, in order to vertically center my child element within its parent. I'm also going to add justify-content: center to center my content horizontally.

Then I'm going to add display: flex to my main element to make it into a flex container. I'm going to make it so that my main element also takes up the full height and width of the page. That content has a height and width on it that takes up the full page. I have a main tag and then a section with a class content within it. Ali Spittel: I have some pre-written HTML.

Display flex horizontal align