Master CSS Positioning & Flexbox Layouts

Day 5 - CSS Positioning and Flexbox: "Master Modern Layouts with Flexbox

Niotechone Marketing Team
November 14, 2025
2:32 am

Introduction

Get ready for an adventure into the world of CSS Positioning and Flexbox!

In today’s tutorial, we will learn how to create modern, responsive web layouts that are beautiful and look great on all screens. We will create a stunning design for a navigation bar and card layout using Flexbox, which is one of the most powerful layout tools in CSS.

What is so important about learning these skills?

Flexbox makes it incredibly easy to align, distribute, and layout the elements in a webpage.
When you understand positioning, you can control precisely where elements are placed.
These skills are necessary for professional websites and to land your first web development role.
Responsive design makes it so your webpage looks amazing on phones, tablets, and desktops.

After this tutorial, you will be able to create navigation bars and card layouts that adapt to screens automatically, which is one of those skills that all modern web developers need to know.

Let’s get started!

Step-by-Step Tutorial

Step 1: Setting Up the HTML Structure

First, let’s create the basic HTML structure for our project:

🌐

<html>
    <head>
        <link rel="stylesheet" href="Positioning_Flexbox2.css">
    </head>
    <body>
        <nav class="navbar">
            <div class="logo">Niotechone🎀</div>
            <ul class="nav-links">
                <li>HOME🏡</li>
                <li>About🛒</li>
                <li>Services⚙</li>
                <li>Contact📞</li>
            </ul>
        </nav>
        
        <div class="card-container">
            <div class="card">card-container 1</div>
            <div class="card">card-container 2</div>
            <div class="card">card-container 3</div>
        </div>
    </body>
</html>

What is going on here?

We create a <nav> element with class navbar to use it as a navigation bar.
Inside it we have a logo (<div class=”logo”>) and navigation links (<ul class=”nav-links”>).
Under the nav we have a card-container that holds three cards.
Each of the above elements has a class we can use for CSS styling.

Pro Tip: It is a good practice to use semantic HTML tags like <nav> because they help search crawlers better process your page and know what the parts of the page are.

Step 2: Resetting Browser Default Styles

🎨

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Why do we do this?

The * selector is a selector that targets every element in the page.
Web browsers add their own margins and padding somewhere, and that can ruin your layout.
The rule box-sizing: border-box uses padding and border in the total width and height size of the element.

Note: This is a CSS reset, which is definitely a best practice, and many developers will do this to start with a clean slate!

Step 3: Styling the Body

🎨

body {
  font-family: 'Poppins', Arial, sans-serif;
  background: #f8f9fb;
  color: #333;
}

Breaking it down:

font-family: assigns the font to Poppins (a clean, modern font) with fallbacks
background: light gray-blue background gives the navbar a more polished look
color: dark gray text (easier on the eyes than pure black)

Pro Tip: Make sure to always provide fallback fonts! If Poppins doesn’t load for some reason, the browser will move to Arial, and then to any sans-serif font.

Step 4: Creating the Flexbox Navigation Bar

Example:

🎨

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(90deg, #6a11cb, #2575fc);
  padding: 15px 40px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  color: #fff;
}

Here’s where the magic takes place!

display: flex: this makes the navbar a flex container (this is key!)
justify-content: space-between: this moves the logo to the left and nav links to the right
align-items: center: this vertically centers items
linear-gradient: this creates a beautiful background with purple to blue gradients
box-shadow: this creates depth with a subtle shadow underneath

Why flexbox? If you do not use flexbox, it requires large amounts of positioning to align horizontally and vertically. With flexbox, it takes only 3 lines!

Step 5: Styling the Logo

Example:

🎨

.logo {
  font-size: 1.8rem;
  font-weight: bold;
  letter-spacing: 1px;
}

Simple but effective:

font-size: 1.8rem: this makes the logo bigger (rem units will scale with browser settings)
font-weight: bold: this adds certain weight to the text to help it stand out
letter-spacing: here we give some space between letters to achieve a more premium look

Step 6: Creating Horizontal Navigation Links

Example:

🎨

.nav-links {
 list-style: none;
  display: flex;
  gap: 30px;
}

Flexbox is incredible, let’s go again!

list-style: none: Gets rid of the bullet points from the list
display: flex: Causes the list items to line up horizontally, instead of vertically
gap: 30px: Creates consistent white space in-between each link (goodbye manual margin!)

Note: You will notice that measuring gaps between flex items is now easy with this relatively new style feature!

Step 7: Adding Hover Effects to Links

Example:

🎨

.nav-links li {
  font-size: 1.1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.nav-links li:hover {
  color: #ffeb3b;
  transform: translateY(-3px);
}

Creating interactive experiences:

cursor: pointer: Makes your cursor into a hand when hover (a better user experience)
transition: all 0.3s ease: Smooths all changes in for 0.3 seconds
: hover selector: Changes colour and moves the link up 3px when you hover over it

Pro Tip: Transitions can make your site feel a little more polished and professional, and people love it when desktop sites have subtle animations! !

Step 8: Building the Card Container with Flexbox

Example:

🎨

.card-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  flex-wrap: wrap;
  padding: 60px 20px;
}

Another flexbox masterpiece:

justify-content: center: Centers cards horizontally
align-items: center: Centers cards vertically
gap: 25px: Consistent spacing between the cards
flex-wrap: wrap: Critical! When the screen is too small, the cards will wrap instead of squishing together, which could interfere with readability
padding: 60px 20px: Provides breathing room around the cards

Step 9: Styling Individual Cards

Example:

🎨

.card {
  background: #fff;
  width: 280px;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.3rem;
  font-weight: 600;
  color: #333;
  border-radius: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

Creating beautiful cards:

Each card is also a flexbox container to center the text within cards themselves.
border-radius: 15px: Rounds corners for a clean modern look
box-shadow: Provides depth and allows the card to appear to float above the background.
keep a fixed width and height to maintain a common card size for all cards.

Step 10: Adding Card Hover Effects

Example:

🎨

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
  background: linear-gradient(135deg, #f0f0f0, #e0eaff);
}

Interactivity on cards:

translateY(-8px): Moves the card up when you hover over it
Increases shadow level for a more dramatic effect
Shifts background to a subtle gradient

This gives a 3D feel for the user, making it feel like they are interacting with physical cards!

Step 11: Making It Responsive (Mobile-Friendly)

Example:

🎨

@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    text-align: center;
  }
  
  .nav-links {
    flex-direction: column;
    gap: 15px;
    margin-top: 10px;
  }
  
  .card-container {
    flex-direction: column;
  }
  
  .card {
    width: 90%;
 }
}

Responsive design in action!

@media (max-width: 768px): Style only applies to screen at 768px size or mobile (tablet/phones)
flex-direction: column: Changes layout from hierarchical organization to stacking of elements
Cards will take up 90% of the screen width on mobile for better readability.

Pro Tip: Always test your website on different screen sizes! Most web traffic comes from mobile devices now.

Tables of Key Concepts

A. Components & HTML Elements Used

Name	Description
<nav>	Semantic HTML5 element for navigation sections
<ul> and <li>	Unordered list and list items for navigation links
<div>	Generic container for grouping and styling elements
.navbar	Class for the main navigation bar container
.logo	Class for the brand logo/name
.nav-links	Class for the navigation links list
.card-container	Class for the container holding all cards
.card	Class for individual card elements

B. Key CSS Properties & Flexbox Features

Property	Description
display: flex	Turns an element into a flex container, enabling flexbox layout
justify-content	Aligns flex items along the main axis (horizontal by default)
align-items	Aligns flex items along the cross axis (vertical by default)
flex-direction	Changes the direction of flex items (row or column)
flex-wrap	Allows flex items to wrap to the next line when space runs out
gap	Creates consistent spacing between flex items without margins
transition	Smoothly animates property changes over specified duration
transform	Applies transformations like translation, rotation, or scaling
box-shadow	Adds shadow effects to create depth and visual hierarchy
linear-gradient	Creates smooth color transitions for backgrounds
@media	Defines responsive styles that apply at specific screen sizes
border-radius	Rounds the corners of elements for modern aesthetics
box-sizing: border-box	Includes padding and border in element’s total width/height

Useful References

Here are some excellent resources to continue your learning journey:

MDN Web Docs – Flexbox – Comprehensive flexbox guide with interactive examples
CSS-Tricks: A Complete Guide to Flexbox – Visual reference chart for all flexbox properties
W3Schools CSS Flexbox – Beginner-friendly tutorials with live code editors
Flexbox Froggy – Fun interactive game to practice flexbox
MDN Web Docs – CSS Positioning – Learn about static, relative, absolute, fixed, and sticky positioning
Responsive Web Design – MDN – Master media queries and responsive techniques
Can I Use – Check browser support for CSS properties
Codepen.io – Practice and share your CSS projects online

Practice Challenges:

Frontend Mentor – Real-world design challenges with starter files
CSS Battle – Sharpen your CSS skills through fun challenges
100 Days CSS Challenge – Daily CSS practice challenges

Source code:
https://github.com/niotechoneSoftware/dotnet-developer-roadmap/tree/main/CSS-Fundamentals/Day%205%20-%20CSS%20-%20Positioning%20and%20Flexbox

Summary – What You Learned

You now understand how CSS Positioning and Flexbox work to create modern, responsive layouts. You learned how to align elements, manage space efficiently, and design flexible structures that adapt perfectly across different screen sizes.

Output

Let's Work Together

Software Development Services

+91 9925 66 8383

Related Tags

Frequently Asked Questions FAQs

What is the main difference between CSS Positioning and Flexbox?

CSS Positioning allows you to place elements precisely using static, relative, absolute, fixed, or sticky positions. Flexbox, on the other hand, is used to create flexible and responsive layouts that automatically adjust to screen sizes.

Why should developers use Flexbox instead of float or inline-block layouts?

Flexbox provides more control, cleaner code, and better alignment options compared to outdated float-based layouts. It’s also easier to create vertically and horizontally centered content without using extra CSS hacks.

How does Flexbox improve responsive design?

Flexbox automatically adjusts the size and spacing of elements based on screen width. By using properties like flex-wrap, justify-content, and align-items, you can make your layout adapt to any device seamlessly.

Can I use Flexbox and CSS Grid together?

Yes! Many developers combine Flexbox for small-scale alignment (like navbars and buttons) with CSS Grid for overall page structure. This hybrid approach offers maximum flexibility and precision.

What are the most common Flexbox properties every beginner should know?

The key properties are display: flex, justify-content, align-items, flex-wrap, gap, and flex-direction. Mastering these gives you control over alignment, spacing, and layout behavior in any design.

Our Story

Company

Services

Trusted By

Trusted By

Expertise

Trusted By

Trusted By

Let's Discuss - Requirements

Let's Discuss - Requirements

Let's Discuss - Requirements

Technologies

Let’s Discuss – Requirements

Let’s Discuss – Requirements

Let’s Discuss – Requirements

Day 5 - CSS Positioning and Flexbox: "Master Modern Layouts with Flexbox

Table of Contents

Introduction

Step-by-Step Tutorial

Step 1: Setting Up the HTML Structure

Step 2: Resetting Browser Default Styles

Step 3: Styling the Body

Step 4: Creating the Flexbox Navigation Bar

Step 5: Styling the Logo

Step 6: Creating Horizontal Navigation Links

Step 7: Adding Hover Effects to Links

Step 8: Building the Card Container with Flexbox

Step 9: Styling Individual Cards

Step 10: Adding Card Hover Effects

Step 11: Making It Responsive (Mobile-Friendly)

Tables of Key Concepts

Useful References

Summary – What You Learned

Output

Categories

Related Articles

Day 1 – CSS – Introduction + Basics Syntax: “Styling the Web: CSS for Absolute Beginners”

Day 4 – HTML Semantics & Forms

Day 3 – HTML Tables Lists Divs Layout Enhanced

Follow Us

Let's Work Together

Related Tags

Frequently Asked Questions FAQs

Services

Our Expertise

Hire Developers

Technologies

Contact For Sales

Contact For Careers

India

Canada