CSS Tutorial 4: Layouts & Flexbox

The modern engineering standard for arranging elements on a screen.

Step 1: The Display Property Foundation

Before we can move boxes around, we must understand how the browser draws them by default. Every HTML element has a built-in display type.

• block: The element acts like a brick wall. It takes up 100% of the available width and forces anything after it onto a new line. (Examples: <div>, <p>).
• inline: The element acts like a word in a sentence. It only takes up exactly as much space as the text inside it, and sits side-by-side with other elements. Important: You cannot set a custom width or height on an inline element! (Examples: <span>, <a>).
• inline-block: A hybrid. It sits side-by-side like an inline element, but obeys your custom width and height commands like a block element.

The Code:

<div style="display: block; background: #4C8BF5;">I am a Block</div>
<div style="display: inline-block; width: 150px; background: #2ecc71;">I am Inline-Block</div>
<div style="display: inline-block; width: 150px; background: #e74c3c;">I sit next to it!</div>

The Output:

I am a Block. I force the next items down.

I am Inline-Block

I sit next to it!

Step 2: Activating the Flex Container

Manually changing elements to `inline-block` to build a layout is tedious. Flexbox automates this entirely. Flexbox works on a Parent-Child relationship. You apply display: flex; to the Parent Wrapper, and it magically aligns all the children inside it.

The Code:

.flex-container {
  display: flex; /* This single line activates the grid! */
  background-color: #d1c4e9;
  padding: 10px;
}

.flex-item {
  background-color: #311b92;
  color: white;
  padding: 20px;
  margin: 5px;
}

The Output:

Item 1

Item 2

Item 3

Step 3: The Main Axis (justify-content)

Once your items are in a flex row, you use justify-content on the Parent Container to distribute the empty horizontal space.

• flex-start: Pushes all items to the left.
• center: Packs all items tightly in the middle.
• space-between: Pushes the first item to the far left edge, the last item to the far right edge, and divides the remaining space equally. This is exactly how Navigation Bars are built.

The Code: Building a Navigation Bar

.nav-bar {
  display: flex;
  justify-content: space-between;
  background-color: #333;
  padding: 15px;
}

The Output:

COMPANY LOGO

Home | About | Contact

Login

Step 4: The Cross Axis (align-items)

While justify-content moves things left and right, align-items moves things up and down (vertically) within the container.

• stretch: (Default). Items stretch vertically to match the tallest item in the row.
• flex-start: Items stick to the ceiling of the container.
• center: Items hover perfectly in the vertical middle of the container.

The Code: Vertical Centering

.hero-section {
  display: flex;
  height: 200px; /* Container must have height to center vertically! */
  align-items: center;
  background-color: #e8f5e9;
}

The Output:

Short Box

Tall Box

Medium Box

Step 5: The Ultimate Centering Trick

Before Flexbox, putting a box in the exact dead center of a webpage required complex mathematical hacks. Today, it requires exactly three lines of CSS on the Parent Container.

.perfect-center {
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
  height: 300px;
}

The Output:

I am perfectly centered.

Final Quiz: Test Your Flexbox Logic

Click the buttons below to verify your knowledge of layout architecture.

1. What happens if you apply `width: 300px` to a `<span>` tag (which is an inline element by default)?

A) The span becomes 300px wide.

Incorrect. Pure inline elements do not respect strict width sizing.

B) The browser ignores the width command completely.

Correct! Inline elements strictly wrap their inner text. If you want it to behave like a block but sit inline, you must use `display: inline-block;`.

C) The text inside the span becomes invisible.

Incorrect. The text remains visible, the width parameter is just ignored.

2. If you want to use Flexbox to organize a row of three buttons, where must you write the `display: flex;` command?

A) Inside the CSS for the individual buttons.

Incorrect. If you put it on the buttons, they become flex containers for the text inside them, not for each other.

B) Inside the CSS for the Parent Container (the div wrapping the buttons).

Correct! Flexbox is a parent-child relationship. You command the parent wrapper, and it automatically organizes its direct children.

3. Which property pushes the first item to the far left, the last item to the far right, and spreads the rest evenly in the middle?

A) justify-content: space-between;

Correct! This is the absolute best way to build navigation bars, as it pins the logo and the login buttons to opposite sides of the screen.

B) align-items: center;

Incorrect. `align-items` handles the vertical Y-Axis, not the horizontal X-Axis.

C) justify-content: center;

Incorrect. This pushes all items into a tight cluster in the middle of the screen.

Class Dismissed!

You have just mastered the most critical layout tool in modern web development. Practice using `justify-content` and `align-items` until the math becomes second nature to you.