No More Confusion! CSS Flexbox Layout Rules Complete Conquest Guide [Cheat Sheet Level]

Are You Writing Flexbox by Feeling?

"For now, just display: flex and justify-content: center and it should be in the middle... huh, it's not?" "The elements are getting crushed... even though I specified width!"

CSS Flexbox (Flexible Box Layout Module) is an essential skill in modern web production, but there are many properties, and some behaviors are not intuitive. It is fine to Google and solve it each time, but understanding "why it happens" will dramatically increase your layout construction speed.

This time, it is a complete guide to understand the behavior of Flexbox from the root and become able to code without hesitation.

CSS Flexbox PlaygroundVisually learn and generate CSS Flexbox layouts

---

Relationship between Parent Element (Container) and Child Element (Item)

The first step to understanding Flexbox is not to mistake where to apply the properties.

• Write in Parent (Flex Container): Rules for the entire arrangement (Horizontal? Vertical? Centered?)
• Write in Child (Flex Item): Behavior of individual items (Stretch? Shrink? Order?)

6 Basic Properties Specified in Parent Element

1. flex-direction: Direction of arrangement

   • row (Initial value): Left to right (Horizontal)
   • column: Top to bottom (Vertical)
   • row-reverse: Right to left (Reverse order)
   • Important: Changing this swaps the "Main Axis" and "Cross Axis".

2. flex-wrap: Wrapping

   • nowrap (Initial value): Stuff into one line (Items get crushed)
   • wrap: Wrap when reaching the end

3. justify-content: Arrangement in Main Axis direction

   • flex-start: Left align (when direction is row)
   • center: Center align
   • space-between: Align both ends (Convenient for navigation)
   • space-around: Even distribution

4. align-items: Arrangement in Cross Axis direction

   • stretch (Initial value): Stretch to fit parent's height
   • center: Center align
   • flex-start: Top align

5. align-content: Arrangement per line when multiple lines exist

   • space-between etc. can be used, but it does not work unless it becomes multiple lines with flex-wrap: wrap.

6. gap: Margin between items

   • Specify like gap: 20px. No need to write margin-right and erase with :last-child like in the old days.

---

Magic of Child Elements: flex-grow, shrink, basis

These three brothers are where people trip up most easily in Flexbox. It is common to write them together with shorthand flex: [grow] [shrink] [basis].

flex-basis vs width

• width: Fixes the width of the element.
• flex-basis: Reference size within Flexbox rules.
• Use flex-basis if you want it to fluctuate depending on content amount or parent size.

flex-grow (Growth Rate)

Ratio of "How to distribute remaining space".

• Everyone flex-grow: 1 → Become equal width
• A is 1, B is 2 → B gets twice the margin of A

flex-shrink (Shrinkage Rate)

"When space is insufficient, who shrinks by how much".

• If set to flex-shrink: 0, it never shrinks (Essential for maintaining image width, etc.).

---

Common Mistakes and Solutions (FAQ)

Q. align-items: center does not work

A. Does the parent element have height? Flexbox aligns within the parent element. if the parent element has only the same height as the child element, there is no way to move. Please secure height with min-height: 100vh etc.

Q. Elements get crushed

A. Please specify flex-shrink: 0. Or specifying min-width is also effective. Flexbox is set to "Shrink if it doesn't fit (shrink: 1)" by default.

Q. justify-content: right does not work

A. Correct is flex-end. However, recently browsers have started supporting start, end, but flex-end is safe.

---

Differentiation from CSS Grid

"If I have Flexbox, I don't need Grid?" No, the roles are different.

• Flexbox: 1-dimensional (One direction) layout. Horizontal, vertical, navigation bar, etc.
• CSS Grid: 2-dimensional (Surface) layout. Skeleton of the entire page, tile-like arrangement, etc.

Conclusion: Inside of parts (components) is Flexbox, layout of the entire page is Grid, using them properly is the modern mainstream.

---

Usable by Copy-Paste! Iron Plate Layout Patterns

1. Dead Center (Vertical and Horizontal Center)

Essential for hero headers and loading screens.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

2. Both Ends Arrangement (Header)

Swing logo and menu to left and right.

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

3. Card Type Layout (Responsive)

Wrapping + Margin.

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.card {
  /* 3列の場合 */
  flex: 0 1 calc(33.333% - 20px * 2 / 3);
}

---

Summary

It is fastest to learn Flexbox by moving your hands rather than memorizing by theory. If you think "Which one was it?", please open Jenee's playground. Move it around, and copy the code when it becomes the ideal shape. That is the most certain and fastest method.

CSS Flexbox PlaygroundVisually learn and generate CSS Flexbox layouts