The flow direction of flex items describes the direction in which flex items are laid out within the containing flex container. The direction can be from left to right, right to left, top to bottom, or bottom to top. These directions can also be described in terms of where flow starts and ends, and how this is interpreted depends on the current writing mode, such as left-to-right-top- to-bottom. The property used to control this direction is the flex-direction property. It is specified in the rule for the flex container (since it applies to all its flex items) and sets the direction in which the flex items are laid out in the container. It is non-inherited and takes the values listed in Table 19.1. Figure 19.2 shows the effects of the values, and Figures 19.3 and 19.4 show example usage, using the row-reverse value.
In the #container{} rule in the example, the width and height properties specify the size of the <div> element of id=“container”, border makes its border 1px-thick black solid line, display makes it a block-level flex container, and flex- direction specifies to lay out the flex items (i.e., the <div> elements inside it) in reverse direction. The #container div{} rule styles the <div> elements (i.e., flex items) inside the flex container, specifying the size, background color, the thickness, line- style, and color of the border, and the border radius (i.e., the roundness of the corners).
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.