We have two options for layout design, Grid and Flexbox. We can use either technology for layout design, each has its pros and cons. I recommend Grid for complex designs and Flexbox for simple designs (also components like menus and buttons). You can also use them both on the same layout.
In the following assignments, we are going to explore Flexbox in depth. Although, I will be using divs for our examples, Flexbox can easily be applied to lists and, as previously mentioned, buttons. Let us look at Flexbox direction row.
Flexbox requires a parent container and children elements. The following elements are all divs. The light blue elements are the parent elements (containers). The coral elements are children (elements within the parent).
The parent container must be given the rule display:flex in order to enable Flexbox. You can then specify the flex-direction, row or column. If you leave out flex-direction, the default is row. Flex children will then line up in a row (next to each other).
Remember this - If flex-direction is row: