I can not figure out why in the header you have to put an element in the column , and not in the row , so that two new blocks in the header are placed horizontally.

After all, in theory, nothing is inherited. Here is the code itself: https://jsfiddle.net/4ub00gt7/ Question about line 24. In theory, the row should be. column is vertical and row horizontally.

    1 answer 1

    The main axis is already redefined above in the class .Container , so the child elements are lined up vertically, i.e. the rows are no longer horizontal, but vertically. If you specify for .Myheader flex-direction: row; , but the rows in our case are the same columns, so to change the direction again we write flex-direction: column; so that the speakers become rows again.

    • You either did not write clearly or lied to something. No column is needed, if the author needs a location from left to right inside the header - mJeevas
    • Absolutely right. In the author’s example, the redefinition of axes in the .Myheader block .Myheader not needed and display: flex; you just need to kill. But the question was asked, so the answer was given. - Alex
    • The axis is always horizontal by default, regardless of the parents. And nothing is inherited. Maybe you still write something wrong? - mJeevas
    • flex-direction - the direction of the main axis along which the children are lined up (by default, row is horizontally from left to right) flex-direction: column; - the main axis is vertically from top to bottom, the elements respectively line up also from top to bottom, and not from left to right. - Alex
    • This I know - mJeevas