Errata

I am just understanding that it is the main-axis / main-start combination.
This looks kind of correct, but the figure is still too dense.

Cheers

The tabbed navigation menu is the first html all the readers will try out.

Figure 7 is too optimistic. A brief comment would be highly appreciated, perhaps at the end of the book.

The issue is the all readers will use the hover effect and to make it crystal clear that the user is over the tab, they will use font-size: bold.

The example in the book tries to avoid such reader behavior by offering alternatives, like text-decoration : underline.

However, the issue is that the growing font size will make the entire navbar move. The nav bar will receive a blow, will dangle.

(This was the motivation for sidebars, if you ask me. You cannot really fail with them: they are much more "user proof". ).

I do not think that this behavior can be corrected. So it should be avoided. But it is fair to note, that potentially a sidebar can deal with this issue much better or another tool is great for preventing this font behavior in a tab.

Cheers.

Figure 13. Home page layout using flex-direction: row and column


This is an optimistic scenario.
Without deeper skill (like I have not...) , you will in 100% of the cases not get the images so beatifully aligned with the text. In fact, the most frequent example will end up in

add to css

img {
width: 95%;
margin:0 ;
outline: none;
}

and the result will be three columns of nearly same width, where the image dictates / prescribes / causes the width of the column. The case with max-width set to a pixel size which cannot compete with the columns size of the <p> text sections is also different from the picture. The images will be of same widths and look less harmonic.

What I thought of , was a kind comment on this - perhaps at the end of book. Image sizing and positioning is difficult, unless you are deep in the topic.

There is a paragraph on "power grid" (pages 137, 138, 139 and starting at page 134 )and the same issue there - actually, I am almost sure that I will find simple scenarios, where my images require more considerations.

My assumption is, that the dynamic of the flex columns as a total is the main focus and the image sizing is partially left to the audience. I will eventually read pages 134 following and that will be in a week or so with more research on image sizing.

Right now, a hint , what the trouble could be and where to look for remediation would be my favorite solution to be put in place, ... unless you are a pro ( and then you do not need the book).

Cheers.

The main-start in flex- direction: column could potentially place away from the drawing start of the cross axis.

This can avoid confusion.

Cheers