• 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

At work, one of the things I do pretty often is write print generators in HTML to recreate and replace forms that the company has traditionally done handwritten on paper or in Excel. This allows the company to move into new web-based tools where the form is autofilled by URL parameters from our database, while getting the same physical output everyone's familiar with.

This article explains some of the CSS basics that control how your webpages look when printed, and a couple of tips and tricks I've learned that might help you out.