Flexbox Playground

These two properties dictate how items are distributed along your container's axes. justify-content controls the alignment along the main axis. If your flex direction is a row, this controls the horizontal spacing. align-items controls the cross axis. If your flex direction is a row, this dictates how items align vertically within the container. When building a PWA, mastering both is essential for adapting to varying screen sizes.

This is the most common Flexbox trap! align-content controls the spacing between multiple lines of flex items. However, it does absolutely nothing if your items are all on a single line. It only takes effect when you have flex-wrap: wrap; enabled and your items have actually wrapped onto multiple lines. It is incredibly useful for spacing out a grid of product cards in your PWA.

The general rule of thumb is that Flexbox is built for one-dimensional layouts, and CSS Grid is built for two-dimensional layouts. If you just need a row of buttons, a navigation bar, or a stack of cards that wrap neatly to the next line, Flexbox is perfect. If you need explicit control over columns and rows simultaneously, like a complex PWA dashboard organized in a bento layout, you should switch to CSS Grid.

By default, Flexbox tries to fit all of your items onto a single line. It will squish and shrink your elements as much as possible before it lets them overflow. To fix this, you must apply flex-wrap: wrap; to the parent container. You can toggle this setting in the playground above and resize the preview box to see it in action.

The absolute easiest way to center an element both horizontally and vertically is to apply three lines of CSS to its parent container: display: flex;, justify-content: center;, and align-items: center;. In Tailwind, you can achieve this exact result by adding flex justify-center items-center to the parent div.