FB001

Flexbox Parent - Flex Direction Row

We have two options for layout design, Grid and Flexbox. We can use either technology for layout, each has its pros and cons. I recomend Grid for complex designs and Flexbox for simple designs and Flexbox for simple designs (also componets like menues 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 perviously mentioned, buttons. Let us look at Flexbox direction row.

flex-direction, justify-content, and align-items

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 defult is row. Flex children will then line up in a row (next to each other).

• You can use justify-content to justify children horizontally.
• You can use align-items to align children elements vertically.

Rows

justify-content:space-around

(Try space-around, center flex-start, space-evenly, or space-between)

.parentthree

align-items:flex-end

(Try flex-end, center or flex-start. Avoid baseline)