CSS Recipe: Using the Flexbox layout mode

This article is about the using the flex-box layout mode in CSS3

Flexbox is the most useful in the context of the Responsive Web Design.

---

Flex Container

This display mode defines the flex context for all it's direct children (everything inside the flex-items rendered as usual). flex (rendered as a block) or inline-flex (rendered as inline):

CSS

.container {
  display: flex; /* or inline-flex */
}

---

Layout content horizontally or vertically via flex-direction:

The flex-direction property specifies the direction of the flexible items inside the flex container.
The default value of flex-direction is row (left-to-right, top-to-bottom).

See the Pen CSS3: Using the Flexbox flex-direction by Andrew (@andrew_mur) on CodePen.

Takeaway note: You could easily layout content items either horizontally or vertically for each particular screen by changing the flex-direction to row or to column accordingly.
For example: you want horizontal navigation on desktop, but vertical on mobile.

---

Spread items across container via justify-content & align-items:

The justify-content property aligns the flexible container's items when the items do not use all available space along the flex-direction.

CSS

.container {
  display: flex; /* or inline-flex */
  flex-direction: column; /* row|row-reverse|column-reverse|initial|inherit */
  justify-content: flex-start; /* flex-end|center|space-between|space-around|initial|inherit */
}

So, you could make the items stick to the start, to the end, to the center or to spread them across the flow with the same deltas:

See the Pen CSS3: Using the Flexbox justify-content by Andrew (@andrew_mur) on CodePen.

Takeaway note: To align items along the content flow use justify-content property and to align those along the perpendicular axis use the align-items property.

See the Pen CSS3: Using the Flexbox align-items by Andrew (@andrew_mur) on CodePen.

Tip: If you want to align the one particular individual item in a special way use align-self property.

---

Define flexbox items size via flex-basis, flex-grow & flex-shrink

flex-basis is the ideal size for the element along the flex-direction if it has enough space for it. If it's not set, the default is auto, which means consider the dimension corresponding to the flex-direction (e.g. width for row).

The flex-grow property specifies how much the item will grow relative to the rest of the flexible items inside the same container. Defaults is zero, which means none of the children will grow beyond their flex-basis. If we will set flex-grow:1 for the first card it will take all the free space along the content flow.

See the Pen CSS3: Using the Flexbox flex-basis by Andrew (@andrew_mur) on CodePen.

Takeaway point: flex-grow defines how the extra space beyond the combined flex-basis should be divided up. flex-shrink defines how the items shrink if their combined flex-basis are greater than container room.

Tip: use flex-wrap if you do not want to allow the content to overflow and make your flex-box act more like a grid.

---

Conclusion

Flexbox is really flexible solution to make your layouts really responsive. The most frequent real use-case it's navigation bars: Imagine you want your menu items aligned horizontally on desktop, from top to bottom on the tablets and from bottom to top in reversed order on mobile screens. All of these is easily achievable via using the info described above and the order property in addition.

---

see Also

• W3 School - CSS3 Flexible box
• CSS Tricks - Flexbox
• Redux - Ecosystem
• @angular-redux/store
• Github - Angular CLI