Flex Layout

on

Flexbox Layout


Parent vs Child Properties

In Flexbox, you must always remember whether a property is applied on the Parent (container) or on the Child (flex item).

  • Container → The parent element that holds all the flex items.

  • Item → Each child element inside the container.

👉 If you mistakenly apply a child property to the container, it won’t work (and vice versa).

1. order Property (Child Property)

The order property is used to change the position of flex items.

  • By default, every item has order: 0.

  • That means items appear in the same order as written in the HTML.

.item {
  order: 1;
}

👉 If one item has order: 1 and the rest are 0, that item will move to the end.
👉 Higher numbers mean the item will appear later.

2. flex-wrap Property (Parent Property)

By default, Flexbox tries to keep all items in a single line (nowrap).

  • If there’s not enough space, items shrink or even overflow outside the screen.

  • Using flex-wrap: wrap; allows items to move to the next line when space runs out.

.container {
  display: flex;
  flex-wrap: wrap;
}

👉 flex-wrap: wrap; is very important for creating responsive layouts.

3. justify-content (Parent Property)

This property aligns items along the main axis:

  • If flex-direction: row → left-to-right.

  • If flex-direction: column → top-to-bottom.

Values:

  • flex-start → Items align to the start (left/top).

  • flex-end → Items align to the end (right/bottom).

  • center → Items align to the center.

  • space-between → First item at the start, last item at the end, equal spacing in between.

  • space-around → Equal space around each item.

  • space-evenly → Equal spacing everywhere.

4. align-items (Parent Property)

This aligns items along the cross axis (the opposite of the main axis).

Values:

  • flex-start → Align to the top.

  • flex-end → Align to the bottom.

  • center → Align to the center.

  • stretch → Items stretch to fill the container’s height.

  • baseline → Items align according to text baseline.

👉 Works properly when the container has a defined height (e.g., 70vh).

5. align-self (Child Property)

If all items are aligned the same way using align-items, but you want one specific item to behave differently, you can use align-self.

.item {
  align-self: flex-start;
}

This overrides the container’s align-items for that item.

6. align-content (Parent Property)

This property only works when flex-wrap: wrap; is applied.
It defines the spacing between multiple rows (or columns) of items.

Key Takeaway

You don’t need to memorize every Flexbox property.
👉 Just remember which properties are for the Parent (container) and which are for the Child (items).
👉 For quick reference, check the CSS Tricks Flexbox Cheat Sheet.

Practice Flexbox with a Fun Game

Try this interactive game: Flexbox Froggy
It lets you practice Flexbox properties while solving puzzles. 🎮

Comments

Post a Comment