Full Stack MERN Web Development

Parent Element Flex Properties

Back to Flex Reference Index

• Parent Element Properties control the container layout, alignment, and spacing behavior of it's
  "child" level elements.
• Suitable for: menus, card alignment, responsive grids, etc.

• display: flex or display:inline-flex; defines the element as a "flex" container.
• flex-direction: Defines "main" axis direction (row, column, row-reverse or column-reverse)
• justify-content: Effects the "MAIN" axis alignment (flex-start, flex-end, center, space-between, etc.)
• align-items: Effects the "CROSS" axis alignment (flex-start, flex-end, center, stretch, etc.)
• align-content: Defines "cross" axis alignment for flex lines (with extra space)
• flex-wrap: Controls item wrapping (wrap, no-wrap, wrap-reverse)

---

Cautions
• A flexbox container must be initiated with display: flex;, or display: inline-flex;.
• Use justify-content and align-items for single line containers.
• Use align-content for multi-line containers.
• flex-direction defines the "Main" axis and all other properties are relative to that.

---

Default Setup

Setting the default workspace

1

2

3

4

5

---

Make it a flex container

*it is not necessary to define flex direction as row because "ROW" is the
default "MAIN" axis, however, it doesn't hurt anything to make that designation

1

2

3

4

5

---

Lets "align" the boxes inside of the workspace

We use justify-content to affect the "MAIN" axis for single line containers.

1

2

3

4

5

We can use space-between, and space-around to evenly distribute the extra spacing within the container.

Lets distribute the extra spacing evenly between the content

1

2

3

4

5

Lets distribute the extra spacing evenly around the content

1

2

3

4

5

---

Lets align the items to the Left or Right sides

First we'll align to the left side.

1

2

3

4

5

and now align to the right side.

1

2

3

4

5

*Remember, you can "reverse" the items using flex-direction: row-reverse;

1

2

3

4

5

---

justify-content affects the MAIN AXIS, and

align-items affects the CROSS AXIS

So we can align items on the CROSS AXIS, the same way we do on the MAIN AXIS, by using align-items

1

2

3

4

5

so we centered the items on the MAIN axis using justify-content: center;
and we centered the items in the CROSS axis using align-items: center;

---

If we have too many items for the space allocated, then we can use an interesting little property
called flex-wrap, which works essentially like "Word Wrap" in other applications.

nowrap is the default and disables the wrap feature, but you can use flex-wrap: wrap; to enable it

As you can see below, we have too many items for the allocated space.
You can see that the boxes are "clipping".

1

2

3

4

5

1

2

3

4

5

1

2

3

4

5

We can fix this using flex-wrap: wrap;.
and now the boxes are "wrapping" to the next line and no longer "clipping".

1

2

3

4

5

1

2

3

4

5

1

2

3

4

5

---

Final Thoughts on Parent Element Properties

All of the examples above we based on the property flex, which assumes the flex-direction: row; property, which is the default direction property for flex.

However, we could have just as easily used the property flex-direction: column; and all of the other flex properties would work exactly the same. The ONLY thing that changes are the MAIN and Cross axis's.

The Key points to remember are,
• In flex properties, you are not thinking vertical or horizontal.
  • you are thinking Main Axis and Cross Axis.
  • these are set by flex-direction (row or column).
• justify-content: effects "MAIN" axis alignment.
• align-items: effects "CROSS" axis alignment.

Back to Top