Instead, it's all about the distribution of the group.

When it comes to the primary axis, we don't generally think in terms of aligning a single child. We can change how children are distributed along the primary axis using the justify-content property: We can control whether items grow or shrink, how the extra space is distributed, and more. As the name suggests, Flexbox is all about flexibility. So, what problem does Flexbox solve? Flexbox is all about arranging a group of items in a row or column, and giving us a ridiculous amount of control over the distribution and alignment of those items. Headings and paragraphs stack vertically as blocks, while things like text, links, and images sit inconspicuously within these blocks. The default “Flow” layout is meant to create digital documents it's essentially the Microsoft Word layout algorithm. This means that, by default, all children will be positioned according to the Flexbox layout algorithm.Įach layout algorithm is designed to solve a specific problem. When we flip display to flex, we create a “flex formatting context”. The default layout mode is Flow layout, but we can opt in to Flexbox by changing the display property on the parent container: Each layout mode is its own little sub-language within CSS. You may do so by adding the class w-full.Link to this headingIntroduction to FlexboxĬSS is comprised of many different layout algorithms, known officially as “layout modes”. In order to see a visual difference make sure that the width of the parent element is bigger than the width of the child element.

Now the same applies to width here as we had before with the height. To do so you use the justify-center class in Tailwind. In order to completely center the child element, so horizontally as well, you need to have justify-content: center set as well on the flex container. Other options like h-40, just picking a random height here, work too for example. So you may do this by adding the class min-h-screen, which sets the minimal screen height to 100vh. Keep in mind that in order to see a visual difference the flex container needs a height bigger than its child element. You may add this by using the class items-center. In order to align contents vertically in a flexbox in Tailwind CSS you need to have align-items: center set on the flex container.

Vertical align within flexboxes with Tailwind CSS

Display flex horizontal align