The text will be off! Even though rectangles are perfectly centered.
But even if font can have its metrics unbalanced, it doesn’t mean it does. What happens in reality?
In reality, most of the popular fonts have metrics slightly off. Many have it significantly off:

• Flex children are just that: display: block or display: inline don't have any affect once display: flex is defined on the parent.

• Flexbox is controlled inside --> out: The size of the children affect the size of the parent. Grid is outside --> in: the size of the parent is specified and the children fit inside.

• Defaults: flexbox by default uses the 'best' size for the children. It doesn't expand them, but it will shrink them if necessary.
  flex-shrink: 1;
  flex-grow: 0;

• If you have multiple rows and columns, and you want them consistent, grid is the better choice

• width is the same as flex-basis IF you are using columns

When we truly learn the secrets of the Flexbox layout mode, we can build absolutely incredible things. Fluid layouts that stretch and shrink without arbitrary breakpoints. In this action-packed interactive tutorial, we'll pop the hood on the Flexbox algorithm and learn how to do remarkable things with it. ✨

In this article, I will explain how we can use CSS flexbox to successfully build a website header, and show you some of the important tips and tricks.

Are you ready to learn how box alignment works for CSS Grid and Flexbox? This article is for you.

On the surface it seems fairly easy to create a masonry layout with flexbox; all you need to do is set flex-flow to column wrap and voilà, you have a masonry layout. Sort of. The problem with this approach is that it produces a grid with a seemingly shuffled and obscure order. Items will be (unbeknownst to the user) rendered from top to bottom and someone parsing the grid from left to right will read the boxes in a somewhat arbitrary order, for example 1, 3, 6, 2, 4, 7, 8, 5, and so on so forth.

We have a whole selection of ways to align things in CSS today, and it isn’t always an obvious decision which to use. However, knowing what is available means that you can always try a few tactics if you come across a particular alignment problem.

In this article, we take a look at the alignment properties in Flexbox while discovering some basic rules to help remember how alignment on both the main and cross axis works.

Whether you’re fairly new to CSS or an experienced developer from elsewhere in the stack who wants to make sure your understanding of layout today is up to date, this guide covers everything you need to know about CSS Layout today.

In a short series of articles, I’m going to spend some time in detailed unpacking of Flexbox — in the same way I have done in the past with grid. We’ll have a look at the things Flexbox was designed for, what it really does well, and why we might not choose it as a layout method. In this article, we will take a detailed look at what actually happens when you add display: flex to your stylesheet.

Flexbox cheatsheet