Day 10 of My Web Dev Internship at Cudose Creative Agency

We Conquered Flexbox!

Hey dev fam!

Today was all about one of CSS’s most powerful layout tools — Flexbox. At Cudose Creative Agency, we walked through its concepts step-by-step and cleared everything. Flexbox is now a tool I feel confident using to build clean, responsive layouts.

Here’s what went down 👇

---

What is Flexbox?

Flexbox (Flexible Box Layout) is a CSS module that makes it easier to design flexible and responsive website — .

You activate it with:

display: flex;

And suddenly, your container and its children behave differently (in a good way).

-—Key Flexbox Concepts We Covered:

1. Main Axis vs Cross Axis

Main Axis: Direction in which flex items are laid out (row or column)

Cross Axis: The perpendicular direction

Flex-direction: row | row-reverse | column | column-reverse;

---

2. Justify Content (Main Axis Alignment)

Controls alignment along the main axis:

justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly;

---

3. Align Items (Cross Axis Alignment)

Aligns items along the cross axis:

align-items: stretch | center | flex-start | flex-end | baseline;

---

4. Align Self

Targets a single item inside the flex container:

align-self: center;

---

5. Flex Wrap

Allows items to wrap if they exceed the container's width:

flex-wrap: nowrap | wrap | wrap-reverse;

---

6. Gap (Spacing)

Gives space between flex items — more elegant than using margin:

gap: 1rem;

---

7. flex-grow | flex-shrink | flex-basis

These control how items grow, shrink, or take up space:

.item {

flex-grow: 1;

flex-shrink: 1;

flex-basis: 200px;

}

Or shorthand:

.item {

flex: 1 1 200px;

}

---Realizations

Flexbox removes the need for floats and complicated positioning hacks.

It’s ideal for navbars, card layouts, horizontal/vertical centering, and more.

Once you understand the axis, the rest clicks into place!

-—Final Thoughts

Flexbox is a cheat

Now that I’ve cleared the foundational concepts and syntax, I feel ready to build smarter, responsive designs — and avoid layout frustration.

Next up: CSS Grid, then media queries and responsiveness!